Как мне заставить стандартный режим работать так же, как и режим quirks?
-
03-07-2019 - |
Вопрос
Следующий Html отлично работает для меня в FireFox или IE7 / 8 (с тегом Style или без него)
<!-- 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 приводит к тому, что оба браузера работают в режиме "Причуд".
Мне сказали, что это плохо.
Я перепробовал несколько типов документов, но не нашел комбинации DocType / HTML, которая обеспечивала бы корректный рендеринг в обоих браузерах.
Все, что отличается от режима "Причуды", заставляет браузеры по-разному реагировать на попытку установить ширину текстового поля.Похоже, это приводит к тому, что я могу исправить свои инструкции либо для FF, либо для IE, и внезапно другой завершится неудачей.
Некоторые детали...
1.> Цель здесь состоит в том, чтобы 3 строки выглядели точно одинаковой ширины при рендеринге в каждом браузере.Необязательно, чтобы отображаемые значения ширины были одинаковыми во всех браузерах, просто они отображаются правильно выровненными внутри каждого браузера.
2.> Изображение, на которое ссылается ссылка, представляет собой разделительное изображение шириной 3 пикселя и высотой 1 (альтернатива этому также была бы хороша).
3.> Я не хочу вводить таблицы, если это вообще возможно.
Кажется, что режим Quirks - это единственный режим, который согласован во всех браузерах.Однако я обеспокоен тем, что в финальной версии IE8 или даже в каком-нибудь будущем браузере режим quirks не будет использоваться по умолчанию.
Что мне следует делать ?Как указать DocType (и, возможно, изменить мой html), который создаст согласованный вид в разных браузерах?
Решение
Основное различие между режимами "Причуды" и "Соответствие стандартам" заключается в другой "коробочной модели", которая приводит к различным способам вычисления размеров на основе настроек ширины / высоты, отступов, полей и границ.В режиме стандартного соответствия эффективная ширина и высота поля вычисляется путем добавления всех этих параметров (пожалуйста, найдите в Интернете более подробную информацию).
Итак, поскольку вы указываете границу в 1 пиксель, ваши первые поля ввода будут иметь ширину 302 пикселя (300 пикселей + 2 * 1 пиксель для границы слева и справа).Несоответствие между FF и IE, о котором вы упомянули, может быть вызвано разными "значениями по умолчанию" для параметра "заполнение".Я только что протестировал ваш код с 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 и границы, в 2 раза превышающей размер (1px).
Вот так-то.Если вы хотите использовать другое заполнение для более приятного внешнего вида, просто включите его в свои расчеты!
Другие советы
Это отличная статья о том, как правильно настроить ваш DOCTYPE:
http://www.alistapart.com/stories/doctype/
Поскольку ваша проблема была в основном вызвана различными значениями по умолчанию в IE и Firefox, вас может заинтересовать Сбросить CSS таблица стилей, которая включает значения для таких вещей, как заполнение, эффективно очищает значения по умолчанию для каждого браузера, чтобы все они отображались одинаково.