CSS делает ширину включает дополнение?

Кажется, что в IE ширина включает размер заполнения. в то время как в FF ширина отсутствует. Как я могу заставить обоих вести себя одинаково?

Спасибо.

Ответ 1

В IE использовалась более удобная, но нестандартная "рамка" . В этой модели ширина элемента включает в себя заполнение и границы. Например:
#foo { width: 10em; padding: 2em; border: 1em; }
будет 10em широким.
В отличие от всех браузеров, опасающихся стандартов, по умолчанию используется поле модели "content-box" . В этой модели ширина элемента не включает заполнение или границы. Например:
#foo { width: 10em; padding: 2em; border: 1em; }
на самом деле будет 16em wide: 10em + 2em дополнение для каждой стороны, + 1em граница для каждого ребра.

Если вы используете современную версию IE с допустимой разметкой, хороший doctype и соответствующие заголовки, он будет придерживаться стандарта. В противном случае вы можете заставить современные стандарты, совместимые с браузерами, использовать "border-box" через:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Первое выражение требуется для Opera, второе - для Firefox, третье - для Webkit и Chrome.

Вот простой тест, который я сделал много лет назад для тестирования того, что объявляет размер вашего объявления: http://phrogz.net/CSS/boxsizing.html

Обратите внимание, что Webkit (Safari и Chrome) не поддерживают модель окна padding-box через любое объявление.

Ответ 2

Простым правилом является попытка избежать использования свойства padding/margin и width для того же элемента. т.е. использовать что-то похожее на это

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

Ответ 3

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

В CSS3 теперь есть свойство размера окна. Если вы установите, скажем, .bigbox { box-sizing:border-box; width: 1000px; border: 5px solid #333; padding: 10px; } ваш класс будет иметь ширину 1000 пикселей, а не 1030 пикселей. Это, конечно, невероятно полезно для тех, кто использует пиксельную границу с жидкими divs, потому что он решает неразрешимую проблему.

Даже лучше, размер окна поддерживается всеми основными браузерами, кроме IE7 и ниже. Чтобы включить все элементы в пределах ширины или высоты, установите размер окна в рамку. Чтобы заполнить другие элементы по ширине и/или высоте, по умолчанию, вы можете установить размер окна в "контент-ящик".

Я не уверен в текущем состоянии синтаксиса браузера, но я все еще использую префиксы -moz и -webkit: .bigbox{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

Ответ 4

У вас объявлен doctype? Когда я начал кодировать html, у меня была эта проблема, и это было из-за того, что не было объявлено doctype. Мое избранное:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>