Что говорит спецификация CSS, это правильный способ измерения ширины элемента?

Chrome, кажется, измеряет ширину элемента внутри поля, включая отступы, но Firefox и IE измеряют ширину блоков, где находится граница (не включая отступы, но внутри поля). измерение ширины элемента от границы имеет смысл для меня, а также полезно при кодировании, потому что включение границ позволит вам очень легко увидеть ширину элемента, но мой вопрос заключается в том, что спецификация CSS говорит, что это правильный способ измерения ширины элемент, и если хром неправильный или IE и Firefox

Спасибо за вашу помощь


google-chrome css internet-explorer firefox specifications
person Carter Cole    schedule 19.01.2010    source источник
comment
То, как вы описали поведение, сбивает с толку. Вы, например, знаете, где именно находятся отступы и поля? Кроме того, вы знаете об ошибке блочной модели в IE? Вы использовали правильный тип документа? Вы уверены, что FF ведет себя точно так же, как IE?   -  person BalusC    schedule 19.01.2010
comment
у меня был div, который был абсолютно позиционирован, поэтому его нижняя часть была скрыта в верхней части экрана... свойство padding заставляло div свисать дальше, чем высота, но только в хроме... IE казалось, что он измеряет граница как высота, не включая отступы... я хотел знать, кто правильно измеряет   -  person Carter Cole    schedule 20.01.2010

Ответы (3)


arrow_upward
5
arrow_downward

Спецификация блочной модели W3C CSS 2.1 говорит, что ширина элемента не включает поля, границы или отступы.

На самом деле, указывая свойства ширины или высоты CSS, вы указываете пространство, доступное для содержимого блока (которое в спецификации называется областью содержимого), которое не включает отступы, поля или границы.

Посмотрите на этот пример:

div { width: 100px; padding: 10px; margin: 20px; border: 2px; }

Расстояние между вертикальными границами (включая их) равно ширине + padding-left + padding-right + border-right-width + border-left-width. Поля находятся за пределами рамки. Вместо этого ширина (согласно спецификациям CSS) составляет 100 пикселей.

Internet Explorer отображает веб-страницы в стандартном режиме или в причудливом режиме. Если вы хотите, чтобы IE вел себя должным образом (то есть в соответствии со стандартами CSS), вы должны заставить его использовать Стандартный режим, используя один из DOCTYPE, описанных в этой статье: http://www.alistapart.com/articles/doctype/

Этот прием называется переключение типа документа.

Firefox и большинство других браузеров следуют стандартной блочной модели.

Спецификацию блочной модели W3C можно прочитать здесь: http://www.w3.org/TR/CSS21/box.html#box-dimensions Но я предлагаю вам прочитать более легкую для чтения (но действительно хорошую) статью: http://reference.sitepoint.com/css/boxmodel

Еще стоит сказать, что спецификации CSS 3 будут включать в себя box-sizing свойство, которое позволит указать для каждого элемента способ интерпретации свойства width (то есть, исключая или включая отступы и границы). В любом случае, большинству браузеров потребуются годы, чтобы внедрить новые (и еще не законченные) спецификации CSS 3.

person Andrea Zilio    schedule 19.01.2010

arrow_upward
2
arrow_downward

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

Свойство width элемента должно быть «шириной области содержимого» и не должно включать поля, отступы или границы. IE не реализовал это таким образом в некоторых версиях и ситуациях. Обычно другие браузеры следуют спецификации.

person zombat    schedule 19.01.2010

arrow_upward
1
arrow_downward

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

border: 10px;
margin: 10px;
padding: 10px;
width: 100px;

Будет иметь следующие характеристики:

  1. Общее пространство, используемое элементом, будет составлять 160 пикселей в ширину. Это width+padding*2+margin*2+border*2, так как мы указали симметричную границу, padding и margin с обеих сторон блока.

  2. Пространство, доступное для содержимого внутри элемента, составляет всего 100 пикселей в ширину.

  3. Пространство, доступное до границы элемента, составляет 120 пикселей.

Chrome, Safari, FireFox, Opera и IE6/7/8 должны отображать такое поведение.

person Jim Jeffers    schedule 20.01.2010