Как мне заставить стандартный режим работать так же, как и режим quirks?

StackOverflow https://stackoverflow.com/questions/416094

Вопрос

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top