Как сделать так, чтобы режим Стандартов работал так же, как режим причуд? - PullRequest
Новая
       20

Как сделать так, чтобы режим Стандартов работал так же, как режим причуд?

2 голосов
/ 06 января 2009

Следующий HTML-код отлично работает в FireFox или IE7 / 8 (с тегом стиля или без него) 

<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        Input.quirks
        {
            margin: 1px 0px 1px 0px;
            border: solid black 1px;
        }
    </style>
</head>
<body>
Should work in Quirks Mode <br />
    <input class="quirks" type="text" style="width: 300px;" /><br />
    <input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
    <input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>

Однако мне говорят, что отсутствие DocType в верхней части HTML приводит к тому, что оба браузера работают в режиме «Quirks».

Мне сказали, что это плохо.

Я пробовал несколько типов DocType, но не нашел комбинации DocType / HTML, которая обеспечивает правильное отображение в обоих браузерах.

Все, кроме режима «Причуд», заставляет браузеры по-разному реагировать на попытку установить ширину текстового поля. Похоже, что это приводит к тому, что я могу исправить свои инструкции для FF или IE, и внезапно другой сбой.

Некоторая деталь ...

1.> Целью здесь является то, что 3 строки должны выглядеть одинаково по ширине точно при визуализации в каждом браузере. Не обязательно, чтобы отображаемые ширины были одинаковыми во всех браузерах, просто они выглядят правильно выровненными / выровненными внутри каждого браузера.

2.> Упомянутое изображение является разделительным изображением шириной 3 пикселя и высотой 1 (альтернатива этому также была бы хороша)

3.> Я не хочу вводить таблицы, если это вообще возможно.

Кажется, что режим Quirks является единственным режимом, совместимым во всех браузерах. Однако меня беспокоит, что в финальной версии IE8 или даже в каком-нибудь будущем браузере режим причуд не будет использоваться по умолчанию.

Что мне делать? Как указать DocType (и, возможно, изменить мой HTML), который создаст согласованный вид в разных браузерах?

Ответы [ 3 ]

9 голосов
/ 06 января 2009

Основное различие между режимами «Причуды» и «Соответствие стандартам» заключается в различной «блочной модели», которая приводит к различным способам расчета размеров на основе настроек ширины / высоты, отступов, полей и границ. В режиме стандартного соответствия эффективная ширина и высота ящика рассчитывается путем добавления всех этих параметров (для получения более подробной информации обратитесь в Интернет).

Итак, так как вы указываете границу 1px, ваши первые поля ввода будут иметь ширину 302px (300px + 2 * 1px для границы слева и справа). Упомянутое несоответствие между FF и IE может быть вызвано различными «значениями по умолчанию» для параметра «padding». Я только что протестировал ваш код с DOCTYPE и без заполнения полей ввода - оба браузера отображали его одинаково. 

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

Теперь, для изображений проставок: не используйте их. Вы не нуждаетесь в них. Просто используйте правое поле "3px" для полей ввода для пробела. 

input.quirks {
    margin: 1px 3px 1px 0px;  /* 3px right margin */
    border: solid black 1px;
    padding: 0px;             /* so that IE and FF use the same padding */
}

Затем выполните математические расчеты, чтобы определить правильные настройки ширины, чтобы сумма всех значений ширины (включая отступы, границы и поля!) В каждой строке были равны, например: 

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

Обратите внимание, что "5px" состоит из 3px-right-margin и 2-кратной границы (1px).

Вот, пожалуйста. Если вы хотите использовать другой отступ для более приятного внешнего вида, просто включите его в свои расчеты!

0 голосов
/ 25 января 2009

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

0 голосов
/ 25 января 2009

Это отличная статья о том, как правильно определить ваш DOCTYPE:
http://www.alistapart.com/stories/doctype/

...