Лучший способ решить проблему css - PullRequest
Новая
       5

Лучший способ решить проблему css

4 голосов
/ 31 июля 2009 
<div style='width:500px; height:500px; padding:50px;'> </div>

Поскольку поведение «заполнения» в IE и Firefox различно. Как лучше всего решить эту проблему?

Ответы [ 3 ]

17 голосов
/ 31 июля 2009

Блочная модель 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>, на отдельной строке.

Более подробную информацию о Quirks / Strict mode можно получить здесь:

CSS - режим причуд и строгий режим

1 голос
/ 31 июля 2009

Другой вариант - добавить условный комментарий для конкретного браузера, с которым у вас проблемы, например: 

<!--[if IE 6]>
     <style type="text/css">
          #thisdiv { width:500px; height:500px; padding:50px; }
     </style>
<![endif]-->

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

1 голос
/ 31 июля 2009

Не только поведение отличается между Firefox и IE ... они различаются даже между различными версиями IE.

Наилучшим подходом является использование CSS-селекторов, а не встроенных стилей, и использование условных комментариев IE для загрузки различных таблиц стилей в зависимости от версии браузера. Позволяет создать одну главную таблицу стилей, а затем исправить любые аномалии в других.

...