проблема блочной модели с тонкими изображениями в doctype html? - PullRequest
Новая
       1

проблема блочной модели с тонкими изображениями в doctype html?

0 голосов
/ 11 января 2012

Кто-нибудь имел опыт работы с тонкими изображениями в модели html-бокса?

т.е. этот код убивает меня: 

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img src="myimage1.jpg" border="1" /></div>
<img src="myimage2.jpg.jpg" border="1" />
</body>
</html>
where both images are like 6px height and 960px wide

в стандартной модели коробки, т.е.: 

<html>
<head>
</head>

<body>
<img src="myimage1.jpg" border="1" /></div>
<img src="myimage2.jpg.jpg" border="1" />
</body>
</html>

это работает как ожидалось

Может кто-нибудь сказать мне, как заставить номер 1 работать, как номер два

Ответы [ 2 ]

1 голос
/ 11 января 2012

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

Конечно, это предполагает, что вы удалите упомянутый блочный конечный тег div.

Но вы явно не показываете нам всю разметку, и здесь происходит нечто большее, с чем мы не можем не увидеть ее.

1 голос
/ 11 января 2012

Я собираюсь угадать, с чем вы сталкиваетесь. 

<img src="myimage1.jpg" border="1" /></div>

Что происходит -

Современные браузеры / парсеры, особенно требовательные, такие как Chrome, будут пытаться исправить ваш код вместо игнорирования / div, чтобы сделать его семантическим. Если вы используете инструменты разработчика, щелкните правой кнопкой мыши, чтобы осмотреть элемент, и вы можете заметить, что браузер добавил <div></div>

Это определяется html5 <!DOCTPE html>, который гарантирует, что браузер переводит его в более строгий режим, а не в режим причуд

Также изменение CSS для изображения в строгом режиме display:block; или vertical-align:bottom; даст вам что-то похожее на причудливую версию

...