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

146

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

Спасибо.

css

— Джейк
источник

Возможно, вам нужно активировать режим, соответствующий стандартам. Однако, не видя некоторого кода, я не могу дать вам больше рекомендаций, чем это.

— Джефф Хаббард

307

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

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

* {
  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блочную модель через какое-либо объявление.

— Phrogz
источник

2

+1 за упоминание моделей контента и рамок. Хотелось бы подробнее остановиться на различиях.

— BoltClock

1

@BoltClock Спасибо за побуждение отвечать более строго. Обновлено.

— Phrogz

Хороший ответ; Я уже несколько дней пытаюсь запомнить (или найти) названия разных вариантов ... +1 =)

— Дэвид говорит восстановить Монику

Никто не заботится об опере.

— Майкл Дж. Калкинс

3

@whitelettersinblankpapers Посмотрите, почему W3Schools отстой, а затем гораздо лучший справочник, который приведет вас к стандарту W3C . Не переходите по ссылкам на W3Schools. Кроме того, добавьте «MDN» в свои запросы поисковых систем о веб-стандартах в будущем.

— Phrogz

27

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

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

— shankhan
источник

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

— Кевин Бил

20

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

CSS3 теперь имеет свойство размера блока. Если вы установите, скажем,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

ваш класс будет шириной 1000 пикселей вместо 1030 пикселей. Это, конечно, невероятно полезно для любого, кто использует границу размером в пиксель с жидкостными делителями, потому что это решает иначе неразрешимую проблему.

Более того, размер окна поддерживается всеми основными браузерами, кроме IE7 и ниже. Чтобы включить все элементы в измерение ширины или высоты, задайте для размера поля значение border-box. Чтобы агрегировать другие элементы по ширине и / или высоте, что является значением по умолчанию, вы можете установить размер поля в «content-box».

Я не уверен в текущем состоянии синтаксиса браузера, но я все еще включаю префиксы -moz и -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— Мейсон Баржа
источник

Да, и у Пола Айриша есть хорошая статья в блоге об этом здесь: paulirish.com/2012/box-sizing-border-box-ftw

— Дэйв Бертон,

Как этот ответ имеет так много откликов, когда тот же ответ, что и принятый, который был написан 3 года назад?

— dippas

1

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

<!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>

— tybro0103
источник

1

для тех, у кого все еще есть проблема, jQuery предоставил два свойства outerWidth ()и innerWitdh ()знать ширину объекта с границами или без них ...

— Патрик
источник