Вопрос по frameworks, html, css – Проблемы совместимости браузера CSS

1

Недавно я разработал веб-приложение для клиента. Я использовал CSS для макета приложения. Я протестировал макет на IE7, Mozilla 3.0.1, Google Chrome 2.0.xxx, Safari 3.1 и Opera 9.51.

Все они отображаются правильно, без проблем. После доставки приложения мой клиент заметил, что у него были проблемы с совместимостью с IE6. Сайт отображался неправильно.

Как мне решить эту проблему? У меня нет IE6 в моей системе, чтобы даже попытаться исправить это. Каждый раз, когда я пытаюсь понизить свой браузер до IE6, IE перестает работать. Есть ли способ, которым я могу получить среду, которая может симулировать IE6 онлайн.

Во-вторых, использует фреймворки CSS, чтобы решить проблему совместимости, и даже если я хочу использовать фреймворк CSS, который лучше, чем Blueprint CSS.

Спасибо за ваше время.

И именно поэтому у нас есть контракты, когда мы выполняем работу для людей - я надеюсь, ради вас, что клиент доплатил за совместимость с IE6 ... ijw

Ваш Ответ

8   ответов
0

сь вы можете узнать, где возникает проблема

0

VirtualBox, установите Win2K на него с IE6 и протестируйте страницу оттуда. Именно так я делаю большую часть своего тестирования, фактически не устанавливая IE6.

Если это было не то, что вы делали для конкретного клиента, а Интернет в целом, я бы рекомендовал использовать код изIE6 больше нет!

0

которая предназначена для решения проблем IE6, и вызовите ее с помощью условного оператора (который поддерживает только IE). Ниже приведен пример того, что вы должны включить в заголовок вашего документа:

<!--[lte IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Возможно, вы также захотите рассмотреть вопрос об «сбросе». ваш CSS, который помогает запускать браузеры на ровном игровом поле (то есть избавляться от непоследовательных полей и отступов в IE). Тот, который я использую, может быть найденВоти Yahoo! предлагаеттаблица стилей приличного сброса как часть YUI 3.

Что касается возможности отладки вашей собственной разметки и стиля в IE6, я предлагаю два варианта:Песочница браузера Xenocode виртуализирует браузеры (IE6, IE7, IE8, FF2, FF3, Chrome, Opera 9, Safari 3, Safari 4) на вашем ПК без необходимости установки самого приложения, иIETester, которая довольно глючная, но позволяет вам отображать разметку в IE6, IE7 и IE8 без необходимости их установки.

5

как он обрабатывает CSS. Лучше всего использовать виртуальную машину или старую систему с IE6 и использовать ее для тестирования. Тем не менее, есть некоторые достойные инструменты, которые по большей части будут эмулировать IE6. Мой любимыйIETester, Это онлайн-инструмент наbrowsershots.org это тоже неплохо, но иногда я нахожу это непоследовательным.

Ваш лучший подход - создать отдельную таблицу стилей, предназначенную только для IE6, и оставить оставшуюся часть CSS в рабочем состоянии. Вы можете загрузить только таблицу стилей IE6, используя в своем HTML следующее<head>:

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

Как только это будет загружено, вы можете начать переопределять ваши обычные стили, которые имеют проблемы в IE6.

IETester - это то, что я использую. Пришел сюда, чтобы предложить эту самую вещь. Как и в любом эмуляторе, могут быть некоторые вещи, которые он не отображает со 100% точностью, но мне еще предстоит столкнуться с проблемой с ним.
У Zombat все получилось идеально. Используйте виртуализированный ПК с IE6 и используйте условные комментарии для исправленияonly IE6 - все остальные увидят это как обычный комментарий и проигнорируют его. Я считаю, что программы, которые эмулируют ie6, делают это недостаточно хорошо, чтобы действительно гарантировать, что вы делаете это правильно.
1

из-за чего сайты, которые правильно закодированы, ломаются под этим браузером. Для решения этих проблем можно использовать метод взлома блочной модели и другие обходные пути, поэтому важно получить IE 6.Вот список общих исправлений для проблем с моделью коробки IE 6

To Solve the IE 6 Problem - my favorite option is to install an IE emulator that lets you run multiple versions of internet explorere. This one is pretty good, although there are others. Another common way is to create a virtual machine running IE 6 or dual booting (both can be time consuming and a pain, but vertainly doable). I prefer to use an emulator when I can.
0

что при использовании блочной модели W3C поле шириной 100px с отступом 2px на каждой стороне, границей 3px и полем 7px на каждой стороне будет иметь видимую ширину 114px. не 124, поскольку W3C исключает отступы и границу из ширины / высоты элемента.

3

отсюда можно было бы загрузить виртуальные ПК и виртуальные жесткие диски для проверки совместимости IE.http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=enЯ также использовал IEtester, как уже упоминалось в zombat, но предпочитаю изображения VPC.

Затем вы можете протестировать свое приложение на соответствие различным версиям IE.

Чтобы заставить IE 6 работать, я часто прибегаю к отдельному листу CSS для него и связываю его, используя условные комментарииhttp://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

Удачи :)

5

что вы сталкиваетесь с проблемой блочной модели, потому что вы выполняете рендеринг в режиме Quirks. IE7 + и все другие браузеры используютW3C box model в то время как IE6 используетIE Box Model в режиме причуд.

IE box model (известная как традиционная блочная модель), включает отступы и границу ширины / высоты элемента.

В блочной модели IE коробка шириной 100px с отступом 2px с каждой стороны, границей 3px и полем 7px с каждой стороны будет иметь видимую ширину 114px.

W3C box model (которая является стандартной блочной моделью), исключает отступ и границу из ширины / высоты элемента.

В блочной модели W3C коробка шириной 100px с отступом 2px на каждой стороне, границей 3px и полем 7px на каждой стороне будет иметь видимую ширину 124px.

Блочные модели http://www.456bereastreet.com/i/box-model.gif

Чтобы IE использовал блочную модель W3C (то, что использует любой другой браузер), ваша страница должна отображаться в строгом режиме. По умолчанию IE рендерится в режиме Quirks.

Чтобы запустить строгий режим в IE, вы должны указать тип документа. Вы можете использовать любой из следующих типов документов:

HTML4 строгое:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ваш тип документа должен быть первым, что появится на вашей странице. Это еще до<html> тег, на своей собственной строке. (Добавление<?xml> Пролог заставит IE вернуться в режим Quirks, поэтому удалите его, если он у вас есть).

Больше информации о Quirks / Strict mode здесь:

CSS - Quirks mode and strict mode

Хотя добавление типа документа для переключения в стандартный режим может не решить всех ваших проблем, вы по крайней мере предпримете ОГРОМНЫЙ шаг в правильном направлении.

Даже в стандартном режиме возможности компоновки / CSS / Javascript в IE6 ограничены, но это шаг 1 при переносе IE6.

Похожие вопросы