Почему Firefox использует блочную модель IE для элементов ввода? - PullRequest
3 голосов
/ 25 февраля 2009

Попробуйте следующий простой пример:

<html>
<head>
<style>
  div,
  input {
    border: 1px solid #000;
    margin: 2px;
    padding: 3px;
    width: 100px;
  }
</style>
</head>
<body>
  <div>div</div>
  <input value="input" />
</body>
</html>

Обратите внимание на div, и входные данные имеют различную ширину. На самом деле ширина ввода составляет 92 пикселя. Для ввода Firefox вычисляет ширину за пределами границы и отступов, так же, как IE делает для всего. Разве он не должен обрабатывать входные элементы так же, как все остальное, и добавлять отступы и границы к ширине?

Ответы [ 2 ]

3 голосов
/ 25 февраля 2009

Как говорит phihag, это блок против встроенного.

Однако в вашем примере есть недостаток: вы не используете DOCTYPE.

Это означает, что браузер может выполнять рендеринг по своему усмотрению.

Вставьте <!DOCTYPE html> вверху, чтобы использовать красивый и компактный HTML5 DOCTYPE, который не позволит браузерам переходить в режим Quirks.

2 голосов
/ 25 февраля 2009

Проблема ширины является следствием совместимого с IE режима совместимости с мозгом. См. Ответ Питера Боутона (doctype) для получения лекарства.

Кроме того, div является элементом уровня блока, а input - нет. Добавьте display:block; к своему правилу, чтобы добиться визуализации div в обоих случаях, или display:inline;, чтобы форматировать оба элемента как встроенные Однако Firefox будет прощать встроенные элементы верхнего уровня и отображать их соответствующим образом.

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