IE не изменяет ширину абсолютно позиционированного элемента

Question

Когда я задаю height в стиле для любого элемента внутри него, IE делает всю ширину 100%, вместо того, чтобы сохранять его «автоматически изменяемым» для ширины.

Другие браузеры отображают его нормально, но не IE. Как мне это исправить?

<div style="position:absolute;top:50px;left:50px;background:green;">
 <div>
  <div>test</div>
  <div style="height: 20px;">this makes it 100% width in IE.  why?</div>
 </div>
</div>

Спасибо!

Answer 1

Вот кое-что, что может работать для вас. Это немного глупо, но если вы пытаетесь найти хорошую ширину для некоторого текста, это единственный способ, кроме известного мне javascript. Мы в основном увеличиваем ширину, не позволяя линии разрываться. Вы можете ввести <br/> s, если вам нужны разрывы строк.

<div style="position:absolute;top:50px;left:50px;background:green;width:0px">
 <div>
  <div>test</div>
  <div style="height:50px; white-space:nowrap">This is normally sized in IE6</div>
 </div>
</div>

Если подумать, не проверяйте ссылку. Он старый и не работает как рекламируется.

Старый ответ:

http://snippets.dzone.com/posts/show/216

Я считаю, что не совсем позиционированные DIV автоматически расширяются, чтобы заполнить свой контейнер горизонтально. Поскольку вы не указали размер контейнера для этого div, он расширяется, чтобы заполнить всю страницу.

Я нахожу странным, что Firefox не расширяет div ... Я не уверен, кто из них на самом деле имеет это "правильно".

Answer 2

Я бы сказал, что это связано с ошибкой hasLayout в IE6. Мои предложения: 1. Присвойте содержащемуся div (элементу с абсолютным позиционированием) заданную ширину. 2. Опубликуйте пример того, чего вы пытаетесь достичь. Мы могли бы предложить более удобный для браузера способ делать то, что вы хотите.