Заставить некоторые элементы HTML вести себя как «блочные» при смешивании со встроенными элементами внутри встроенного родителя - PullRequest
Новая
       8

Заставить некоторые элементы HTML вести себя как «блочные» при смешивании со встроенными элементами внутри встроенного родителя

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

Я пытаюсь получить div с его свойством display, установленным на inline (или inline-block, если я хочу поле), чтобы правильно вести себя в IE (это происходит в большинстве других).Моя ситуация такова - представьте себе рабочее пространство, в котором контейнер элементов содержит встроенные элементы, расположенные горизонтально.Эти элементы могут содержать такие вещи, как текст или изображения, но также могут быть составными типами, скажем, например, «дробь», числитель и знаменатель которой сами являются контейнерами элементов, содержащими больше горизонтальных элементов.

Так, например, яможет иметь HTML: 

<div class='item-container'>
    <div id='statictext' class='item'>x = </div>

    <div id='fraction' class='item'>
        <div id='numerator' class='item-container'>...</div>
        <hr/>
        <div id='denominator' class='item-container'>...</div>
    </div>
</div>

Ясно, что я не хочу фиксированной ширины или высоты для элемента или контейнера-элемента, потому что они могут содержать вложенный контент, который увеличит объем необходимого пространства (например, представьте себедробь внутри другой дроби), и аналогичным образом, если я хочу, чтобы ширина статического текста 'item' была достаточно большой, чтобы вместить текст в одну строку, т. е. встроенную.

Проблема, которую я считаю, заключается в том, чтотрудно избежать размещения элементов блока внутри моих встроенных элементов 'item' / 'item-container', например, <hr> в дроби, или, если я хочу сказать, строку меню в верхней части 'item', которая использует целоеширина после ширины остальной части содержимого элемента была рассчитана.Я знаю, что это недопустимый синтаксис, чтобы помещать фактический элемент блока во встроенный, хотя установка атрибута отображения элемента блока в значение inline или inline-block заставляет вещи вести себя корректно в Firefox / Chrome, по крайней мере.Но увы не в IE.

Есть ли адекватное исправление?

РЕДАКТИРОВАТЬ: я фактически использовал встроенный блок (с соответствующим взломом IE) для 'item' и 'item-container', чтобы заставить его работать в Firefox и др., Но IE все еще рассматривает их как встроенные,который затем впоследствии преобразуется в блок, потому что один из его дочерних элементов является блоком.

1 Ответ

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

Не используйте <hr>. Вы можете нарисовать линию, используя text-decoration: underline, либо используя нижнюю границу, либо используя изображение (скажем, однопиксельное изображение, растянутое до желаемой ширины). Тогда вы можете работать со встроенными элементами.

...