Pokidov Dmitriy

Fucking div in fucking IE

Wednesday, 23. April 2008, 07:42:18

Сверстал я значит html. Все уже было готово и дело дошло до тестирования. Я конечно ждал всяких гадостей от "моего самого любимого браузера Internet Explorer 6", но чтобы на это убить 2 часа!!!! Отладка была затруднена тем что все писалось на gwt и фактически самого хтмля я не видел, а анализировал все только через инспектор DOM(кстати поиск бесплатного инспектора для IE это тоже отдельная история). В итоге все было разобрано по частям в течении полутора часов и получилась всего одна строчка:

<div style="width: 100%; height: 2px; background-color: red"></div>

. Что мы видим в IE??? Мы видим толстую линию не как ни в 2 пикселя. ШЕФ, ВСЕ ПРОПАЛО!!!! но не тут то было

Русских так просто не взять, после этого я сделал div не пустым и выяснил что высота div - это высота шрифта, после этого решение пришло:

<div style="width: 100%; height: 2px; background-color: red; font-size: 1px"></div>

ТАРАМ!!!
Всё, работает.

Hello world!!!!Ошибка которой 25 лет

Comments

PostmanPechkin # 24. April 2008, 05:04

Чорт, мало что понял, но всё равно завидно!

html-coder # 24. April 2008, 19:08

Совершенно неправильная реализация.
Чтобы сделать полоску надо пользоваться или <hr> или задавать border для дива. А сам див ни в коем случае не оставлять пустым, а заполнять кодом пробела  .

Инспектор для ИЕ есть, но я бы не сказал, что это верх удобства. Лучше пользоваться файрбагом.

dooman # 24. April 2008, 19:26

Ну для меня это было поучительно в связи с тем что в gwt есть виджет под названием HTML. Собственно наверно в начале надо было упоминуть что данный виджет обрамляет содержимое в

<div>

Т.е.


HTML widget = new HTML("<hr>");

сгенерирует ДОМ следующего вида:


<div><hr></div>

Ну и кстати, не надо забывать что есть еще вертикальные линии, с ними были другого рода траблы в ИЕ. По поводу пробела в диве, я тоже удивился хинту типа:

<div></div>

- дива нет, зато:

<div><!-- --></div>

- див есть

html-coder # 24. April 2008, 19:48

Вертикальные линии я задаю только через border.
А див с комментарием - все же не лучший вариант. Пробел удобнее. Только пробел обязательно должен быть как спецсимвол -  

alen4ik # 4. May 2008, 20:40

хи хи )))) надо ж сколько разных способов))) можно еще вырезать из бумаги и прилепить к монитору... но это тоже будет совсершенно неправильная реализаия)))
dooman учись пока тебе советуют)))

html-coder # 5. May 2008, 05:04

Учиться никогда не поздно и никому не вредно.

g00r00 # 13. May 2008, 08:39

Кстати, ещё помогает использование доктайпа. Например, я открыл DW, сказал сделать сгенерить HTML, потом вставил туда твой первоначальный код, в итоге:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <div ></div>
</body>
</html>

и в итоге - полоса высотой 2px в IE, правда в 7-ом, в 6-ом счас не могу проверить, но по логике первоначальный также вариант не работал в IE7.

P.S.: почему то в блоке кода пропал аттибут style у div'a, подскажите pls как правильно завернуть код?

html-coder # 13. May 2008, 09:19

Правильно стили делать отдельным файлом

g00r00 # 13. May 2008, 10:04

Не совсем так. Стиль надо делать отдельным файлом только если он используется на нескольких страницах, если же стиль используется на одной странице, то он может быть встроенным в код, но крайне желательно делать это в секции <head>
Ну а инлайновый стиль это конечно неправильно, но я написал как у автора, чтобы было с минимальными изменениями, а вообще, это же тестовый пример, тут не обязательно делать правильно, главное показать технологию.
И наконец, я имел ввиду именно здесь в комменте в секции кода пропадает кусок текста.