csslint - модель разбитой коробки

Question

Я использовал CSSLint для своих таблиц стилей и получаю одно предупреждение, которое не понимаю.

Рассмотрим этот код CSS:

div {
    width: 50px;
    height: 50px;
    border: 1px solid;
}

CSSLint говорит следующее: «Сломанблочная модель: с использованием высоты с рамкой. ""Модель с разбитой рамкой: использование ширины с рамкой."

Почему я не должен использовать ширину / высоту с рамкой?

Answer 1

Я полагаю, что CSSLint пытается навязать читателю ряд хороших практик, не имеющих необходимости понимать значение блочной модели. В конце концов, я прекрасно понимаю блочную модель и понимаю, что ваш css выдает «фактическую» ширину / высоту 52 пикселя, что, возможно, пытается предотвратить недоразумение.

Лично я бы проигнорировал это. Оно говорит скорее «предупреждение», чем ошибка, и поэтому оно субъективно.

Answer 2

Это предупреждение, а не ошибка, так что все в порядке!

То, о чем вы предупреждаете, это то, что в стандартной блочной модели ширина border равна . к указанной вами высоте / ширине.

Так что в вашем примере фактическая высота и ширина поля на странице будет 52 пикселя.

CSSLint предупреждает вас об этом, потому что, возможно, вы этого не поймете, и, следовательно, ваш макет может быть не совсем таким, как предполагалось.

Если вам известно об этом, и вы приняли это во внимание в своем макетезатем вы можете снять флажок «Остерегаться сломанной модели ящика» в CSSLint, чтобы скрыть это предупреждение.

Кстати, то же самое относится и к padding.

Answer 3

Старые версии Internet Explorer (по сравнению со всем остальным) используют другой способ вычисления ширины вещей.Старый IE измерял прямоугольник, включая его отступы и границы, новый материал измерял размер содержимого без отступов и границ.Чтобы убедиться, что ваш сайт будет отображаться одинаково для обоих типов блочной модели, вы можете выбрать не использовать отступы / границы и ширину / высоту в стиле, применяемом к одному и тому же элементу.

1. https://plus.google.com/103013777355236494008/posts/FqUEyyvT4RH
2. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug