HTML 5, несоответствие границ CSS - PullRequest
0 голосов
/ 19 марта 2012

Я осмотрелся, но не нашел решения этой проблемы.Используя следующий CSS

border: double 1px #999;
outline: solid 4px #EAEAEA;

, я смог довольно легко создать простую двойную рамку вокруг DIV.В HTML4.Затем я переключил тип документа на <!DOCTYPE html>, после чего нижний контур был смещен примерно на 5 пикселей.Любопытно, что только нижний контур, потому что остальные 3 стороны все еще находятся на одном уровне с границей.

Я что-то упускаю из-за контуров границ в HTML5?Я должен подчеркнуть, что в HTML4 он выглядит идеально.

1 Ответ

1 голос
/ 20 марта 2012

Это может быть проблема блочной модели в режиме причуд (если вы использовали неполный переходный DOCTYPE, который не включает «стандартный режим»).Без правильного DOCTYPE вы получите эмуляцию ошибок IE5, включая «старую» блочную модель.

Поведение, которое вы получаете с <!DOCTYPE html>, считается правильным в спецификации CSS.

В идеале для компенсации следует уменьшить размеры элемента на ширину границы.

В качестве альтернативы (если вы используете размеры в %, например), переключите блочную модель на ту, которую вы ожидаете(работает в IE8 +):

div {box-sizing: border-box;}

Обратите внимание, что это влияет только на границы.Контур будет вне рамок, и это не повлияет на макет.Вы можете зарезервировать место для контура, используя эквивалент margin.

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