Проблемы совместимости браузера CSS - PullRequest
Новая
       7

Проблемы совместимости браузера CSS

1 голос
/ 07 августа 2009

Я недавно разработал веб-приложение для клиента. Я использовал 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.

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

Ответы [ 8 ]

5 голосов
/ 07 августа 2009

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

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

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

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

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

Box Models
(источник: 456bereastreet.com )

Чтобы 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 - режим причуд и строгий режим

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

5 голосов
/ 07 августа 2009

IE6 - известная катастрофа в том, как он обрабатывает 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.

3 голосов
/ 07 августа 2009

Во-первых, отсюда неплохо было бы загрузить виртуальный ПК и виртуальные жесткие диски для тестирования совместимости 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

Удачи:)

1 голос
/ 07 августа 2009

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

  1. Для решения проблемы IE 6 - мой любимый вариант - установить эмулятор IE, который позволяет запускать несколько версий Internet Explorer. Этот довольно хорош, хотя есть и другие. Другим распространенным способом является создание виртуальной машины с IE 6 или двойной загрузкой (обе могут быть трудоемкими и трудными, но выполнимо выполнимыми). Я предпочитаю использовать эмулятор, когда могу.
0 голосов
/ 02 сентября 2009

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

0 голосов
/ 08 августа 2009

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

0 голосов
/ 07 августа 2009

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

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

0 голосов
/ 07 августа 2009

Создайте таблицу стилей, специфичную для исправления проблем 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 без необходимости устанавливать их.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...