| |
|
|
| | Здравствуйте.
Осваиваю DIV-ную верстку, и в процессе удаления из темплейтов таблиц наткнулся на интересное поведение IE 6.0.
Вот такой код:
<div style="border: solid 1px Red; width:70px; height:30px; padding: 0; margin: 0"><img src="i/Label.gif" width="70px" height="30px"/></div>
|
работает вполне ожидаемо: вокруг картинки, вплотную к ней, появляется красная рамка.
А вот такой код (единственное отличие от предыдущего примера - размещение каждого тэга в отдельной строке):
<div style="border: solid 1px Red; width:70px; height:30px; padding: 0; margin: 0">
<img src="i/Label.gif" width="70px" height="30px"/>
</div>
|
Добавляет под картинкой, перед красной границей, пару ненужных пикселей.
В IE7, Opera, FF и Safari данная проблема не проявляется. Собственно, вопрос - эту проблему можно победить как-нибудь, кроме размещения DIV в одну строку (что делает код трудночитаемым - в реальном коде не только картинка присутствует)?
Заранее спасибо за советы и ссылки,
Денис.
PS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| |
|
|
| |
|
|
| |
для: Denis_Gorby
(25.07.2007 в 18:22)
| | | IE и таблицы с таким красывым форматированием тоже чудно обрабатывает иногда. единственное что приходит в голову - <img style="float:left;" />
а для вашего кода можно остановиться на
<img src="i/Label.gif" width="70px" height="30px" style="border: solid 1px Red; float:left;clear:both" />
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(25.07.2007 в 18:31)
| | | Спасибо, float решил проблему в данном текстовом примере, но для реального сайта породил некоторые новые сложности.
Путем научного тыка удалось объяснить поведение DIV-a в IE 6 - он считает наличие перевода строки в теле текстом и выделяет под него место, как в данном случае:
<div style="border: solid 1px Red; padding: 0; margin: 0"><img src="i/Label.gif" width="70px" height="30px"/>рррр</div>
|
Приведенный код в любом браузере добавляет пару пикселей под картинкой, чтобы палочка от р уместилась. Проблему удалось решить добавлением vertical-align к картинке, что сместило весь текст чуть вверх.
<div style="border: solid 1px Red; padding: 0; margin: 0"><img src="i/Label.gif" width="70px" height="30px" style="vertical-align:-3px"/>рррр</div>
|
Выглядит как workaround, но работает. | |
| |
|
|
| |
|
|
| |
для: Denis_Gorby
(25.07.2007 в 18:22)
| | | отступ просто потому что есть символ переноса каретки :)
да и смысл для этого див делать? <img src = "" alt = "" style="border:1px solid #f00;"> | |
| |
|
|
