Xpoint
   [напомнить пароль]

Расчет ширины блока в IE после float и его перенос

Метки: [без меток]
2011-07-30 21:14:25 [обр] Антон(0/3)[досье]
Собственно, все, чего бы мне хотелось - это заставить IE отображать данный пример так же как это делают другие браузеры. Т.е., чтобы зеленый блок со ссылкой не уезжал под красный блок с float...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <body>
      <div style="width:300px; border:1px solid black;">
          <div style="float:left; background: #f00; width:100px; height:100px; "></div>
          <a href="" style="display:block; width:300px; background: #0f0;">TODO write content</a>
      </div>
  </body>
</html>
спустя 20 часов [обр] Олег Торбасов(0/3)[досье]

Во-первых, у Вас код не валидный. Допишите элементу html атрибут xmlns с положенным значением и секцию head с элементом title. Во-вторых, указывайте браузер точнее, пожалуйста. В IE 8 и 9 всё нормально.

В-третьих, да, это такой баг. Лечится так: задайте ссылке width: auto

В-четвёртых, блок ссылки от этого перестанет уезжать вниз, но основной контейнер в IE6/7 продолжит охватывать поплавок. Если для Вас это нежелательно (обычно это как раз желательное поведение, ради которого в нормальных браузерах используют clearfix), придётся мудрить дальше.

спустя 8 минут [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]

Самый простой вариант — не указывать зеленой ссылке-блоку ширину вообще. От задания ширины в старых IE включается hasLayout, действующий подобно контексту форматирования (похожий эффект в браузерах дает overflow:hidden или display:table). А за счет display:block ссылка и так займет всю ширину контейнера.

Еще вариант — внести красный блок внутрь ссылки, но тогда придется поменять доктайп на HTML5, т.к. только в нем это допустимо.

спустя 1 день 18 часов [обр] Антон(0/3)[досье]
Спасибо. Действительно, свел реальный шаблон к тому, что обошелся без ширины (там все немножко не так как в примере, но поняв, что глюк изза этого я привел ситуацию к тому, что ее как и тут можно не указывать).
Powered by POEM™ Engine Copyright © 2002-2005