Столкнулся тут по неопытности с таким закидоном:

Есть такой код:

<div style="width: 88px; height: 31px; background-color: gray;"><img src="ченить" width="88" height="31"></div>

работает, как ожидается.

А вот так если написать (просто добавить переводы строки для удобочитаемости):

<div style="width: 88px; height: 31px; background-color: gray;">
<img src="ченить" width="88" height="31">
</div>

В IE снизу выползает несколько пикселей background-color, т.е. он эти переводы строки отрисовывает и растягивает div по высоте на несколько пикселей.

Это известная фича, или IE просто не понимает маковского кода перевода строки (0d)?

Вообще-то, это ПРАВИЛЬНОЕ поведение.

Crazy, Что ж тут правильного? Это не правильно ни с какой точки зрения.

1 Это исключает возможность форматирования кода, т.е. весь код должен быть написан одной строкой. Удобной работы, кодеры!
Разве что комментариями можно визуально разбить текст на логические куски.

2 Для перевода строки есть специальный тег <br />. Плюс блочные теги типа <p>. А hex-коды вообще не являются элементами html, и потому html-интерпретатор не имеет морального права на них реагировать вообще.

3 Если уж отрисовывать CR, то всегда, например, между

<div>
<div>
</div>
</div>

А также надо отрисовывать табуляторы. Где ж логика и правильность?

Впрочем, это уже лирика :о)

А вот стандарты html или xhtml это как-то регулируют?

Тоже такое было выхода не нашел приходится писать одной строкой иногда

Dimalish, да есть такое

Dimalish, на самом деле это более чем известно и, вообще говоря, это действительно одно из немногих ПРАВИЛЬНЫХ поведений ИЕ и, конечно же, мак тут ни при чём. Правильно это как минимум (вот совсем базово) потому, что логическая разметка не предназначена для визуализации.

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

хмм... а чем вас не устраивает подобное решение:
<img style="width: 88px; height: 31px; background-color: gray;" src="ченить" width="88" height="31">

естественно, это баг, так как любое количество пробелов, табуляций или переносов строк должно оцениваться как один пробел.

а лечится это просто — нужно указать фиксированный размер шрифта, например font-size:1px

причем не просто фиксированный, а достаточно маленький, чтобы блок не растягивал.

ну с таким же успехом можно использовать свойтсво line-height

.talisman, почему же баг?? Ты ж сам говришь, что " любое количество пробелов, табуляций или переносов строк должно оцениваться как один пробел" - значит в нашем случае перенос строки расценивается как пробел перед картинкой. А раз она вширину занимет всё место, приходится искать место под этот пробел, раздвигая границы дива вертикально.

А визульно код всё-равно можно сделать легко читаемым: подобные случаи достаточно редки; а переносить строку смело можно, например, между тегами </td> и <td>, где этот пробел просто не будет отрисовываться браузером, или просто между словами в тексте, где и так должен быть пробел.

Seka, если вместо переносов поставить пробелы, то ничего не расползается.

исправлено: расползается

Dimalish писал(а):

Crazy, Что ж тут правильного? Это не правильно ни с какой точки зрения.

Так прописано в стандарте. Зачем и почему так сделали -- это не ко мне.

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

Crazy, как именно прописано, ткни носом, пожалуйста.

В принципе, я уже чисто из эстетского любопытства. :о)

Тем более, что он (IE) ведь не добавляет новую строку (соответствующей высоты), а добавляет фикзнатчто размером в непонятные 3-4 пиксела.

Dimalish, если поманипулировать размером шрифта, можно добиться добавления и 1 пиксела, и 10, и 100.

Dimalish писал(а):

Столкнулся тут по неопытности с таким закидоном: Есть такой код: <div style="width: 88px; height: 31px; background-color: gray;"><img src="ченить" width="88" height="31"></div> работает, как ожидается. А вот так если написать (просто добавить переводы строки для удобочитаемости)

Если не получается в одну строку, то тогда лучше переносить по тем местам, где пробелы, например:


Да и вобще, ширину и высоту картинки прописывать через стайл

.talisman писал(а):

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

В бессмысленную полемику я вступать не буду.

Crazy, ок.

Если учесть, что HTML (как один из представителей SGML) для браузера - поток данных, а в потоке никаких переводов строки нет и быть не может, то поведение эксплорера естественно неправильное. Пробел и перевод строки выступают в HTML только как разделители идентификаторов (исключение - контейнер <PRE> и <CODE>).

Кстати, наверняка никто сейчас не использует HTML страницы как таковые. Все генерят код на скриптах из шаблонов HTML. Так почему бы, например, не сделать перед выводом в поток браузера удаление CR и LF внутри <BODY> (исключая <PRE> и <CODE>) скриптом?

gregzem писал(а):

Если учесть, что HTML (как один из представителей SGML) для браузера - поток данных, а в потоке никаких переводов строки нет и быть не может, то поведение эксплорера естественно неправильное. Пробел и перевод строки выступают в HTML только как разделители идентификаторов (исключение - контейнер <PRE> и <CODE>).

Друг мой, вы определенно произносите что-то странное. Если для SGML переводы строк не значимы, то в PRE они в принципе не могли бы иметь специальной обработке.

Продолжайте учить матчасть.

P.S. Если желаете -- можете поискать в описании SGML фразу о незначимости переводов строк. Я ее там не видел -- но может быть, вам удастся найти.

Crazy писал(а):

Друг мой,

Вы меня верно с кем-то путаете, маэстро.

Crazy писал(а):

вы определенно произносите что-то странное. Если для SGML переводы строк не значимы, то в PRE они в принципе не могли бы иметь специальной обработке.

Странно, что приходится это объяснять Вам. Но в HTML (XML, SGML) нет никаких строк. Есть поток данных, идущий в браузер и это его головная боль, как трактовать ту или иную последовательность.

Crazy писал(а):

P.S. Если желаете -- можете поискать в описании SGML фразу о незначимости переводов строк. Я ее там не видел -- но может быть, вам удастся найти.

Конечно не видели, я и говорю о том, что перевод строки не имеют никакого значения для производных SGML, так как это просто разделитель сущностей. А вот и выдержка:
http://xml.coverpages.org/sgmlsyn/sgmlsyn.htm#C6.2.1

Я Вам даже помогу с переводом:

Separator - "разделитель"
Entity - "сущность"



В догонку, для тех, кто любит "потрещать ни о чем" http://www.citforum.ru/internet/html3.2ex/gl_12.shtml

gregzem писал(а):

Странно, что приходится это объяснять Вам. Но в HTML (XML, SGML) нет никаких строк.

В нашем деле важна внимательность (c)

В моем сообщении сказано не о наличии в SGML строк, а о символах перевода строк. Это CR и LF.

Цитата:

Конечно не видели, я и говорю о том, что перевод строки не имеют никакого значения для производных SGML, так как это просто разделитель сущностей.

Опять противоречие. "Никакого" и конкретное значение "разделитель сущностей" -- это вовсе не одно и то же. Не нужно пытаться играть словами, если не понимаете их семантики.

Цитата:

А вот и выдержка: http://xml.coverpages.org/sgmlsyn/sgmlsyn.htm#C6.2.1

Твоя проблема, друг мой, в том, что мало найти через гугл цитату -- нужно еще и понять, что она означает. К сожалению, приведенный тобой текст имеет справочный характер -- для тех, кто знал, но забыл. Т.е. не твой случай.

Действительно, CR и LF могут рассматриваться как разделители. Однако они также входят в описание #PCDATA (да, на этой странице такой цитаты не было, поэтому ты не в курсе). Так что говорить о том, что CR (LF, пробел и т.п.) в SGML всегда являются разделителями -- значит публично декларировать непонимание контентной модели SGML.

Цитата:

В догонку, для тех, кто любит "потрещать ни о чем" http://www.citforum.ru/internet/html3.2ex/gl_12.shtml

Воистину, хорошее определение и хорошая ссылка. Ибо здесь сказано: "То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле HTML."

Обращаю внимание: здесь вовсе не сказано об игнорировании пробелов или разделителей строк. Здесь сказано, что они при обработке редуцируются до одного.

Небольшим недостатком этого текста является то, что он невольно вводит неофитов в заблуждение: не SGML требует редуцировать все пробелы до одного, а семантика HTML допускает такое редуцирование в подавляющем большинстве тэгов. В тексте, разумеется, говорится только про HTML (видимо сбивает упоминание SGML по другому поводу абзацем ниже).

Причем в другом разделе этого же материала указано, что в HTML это правило имеет исключения. Т.е. автор понимает, что пишет.

Но в данном случае этот семантический нюанс для нас неважен. Отбросим твои попытки увести дискуссию в дебри теоретического обсуждения SGML и вспомним, с чего мы начали:

Цитата:

<div style="width: 88px; height: 31px; background-color: gray;"><img src="ченить" width="88" height="31"></div> работает, как ожидается. А вот так если написать (просто добавить переводы строки для удобочитаемости): <div style="width: 88px; height: 31px; background-color: gray;"> <img src="ченить" width="88" height="31"> </div> В IE снизу выползает несколько пикселей background-color

Итак, автор треда обратил внимание, что разделитель строк, будучи добавлен в div, не уничтожается (как это было бы сделано, к примеру, межде тэгами TR и TD, а обрабатывается и дает визуальный "фидбэк".

Откроем HTML DTD и посмотрим описание DIV:



Итак, мы видим, что в контенте DIV однозначно заявлено #PCDATA. Это значит, что встречающиеся пробелы и разделители строк трактуются как обычные символы и не могут быть отброшены парсером.

Чтобы было понятнее -- возьмем для контраста пример с TR и TD:



Т.е. внутри TR могут быть только тэги TH и TD и разделители (пробелы, разделители строк и т.п.)

Соответственно, если мы пишем перевод строки между TR и TD, то он трактуется как разделитель еще при парсинге и просто игнорируется.

Известно, что в IE с давних пор была удобная ошибка (багофича) -- игнорирование в ряде случаев переводов строк, если они находятся на границе тэга. Это действительно удобно для верстки. Хотя и нарушает стандарт.

В нашем случае -- пикселы появились только снизу -- мы видим, что IE сожрал пробельные символы после начала DIV (нарушение), но оставил их перед его окончанием (все корректно).

Но нам действительно хотелось бы другого поведения. Увы.

Цитата:

В нашем случае -- пикселы появились только снизу -- мы видим, что IE сожрал пробельные символы после начала DIV (нарушение), но оставил их перед его окончанием (все корректно).

если поставить фонт-сайз равным, скажем 100, то пустое место появится и сверху.

.talisman, may be.

…

Я, грешен, иногда пишу так:



Согласен, извращение. Но привыкнуть легко.

Crazy писал(а):

Согласен, извращение. Но привыкнуть легко.

Именно в такой интерпретации -- ну, не извращение , но странновато. Хотя то, что привёл я, примерно то же самое, только чуть более читаемо. Это полезно, особенно, если достаточно длинные строки... и они часто повторяются/встречаются.

еще раз скажу, есть два варианта решения.

номер 1.
не используем обрамляющий блок, вполне можно обойтись без него:


номер 2.
указываем достаточно маленький фиксированный размер шрифта (font-size), либо высоту строки (line-height). Оптимальный размер можно определить опытным путём. Фиксированный, чтобы при увеличении не расползалось.


чем это вас не устраивает?

tentoys писал(а):

Это полезно, особенно, если достаточно длинные строки... и они часто повторяются/встречаются.

Для JSP/PHP, увы, достаточно характерно...

Crazy, большое спасибо, это именно то, что я надеялся узнать.

TONIC XGM, .talisman, то, что я привел - это не рабочий код, а иллюстрация вопроса. Никаких решений "проблемы" не требуется. Вопрос был исключительно эстетическо-познавательного свойства.