Интернет проводник и поплавки: объясните пожалуйста - PullRequest
Новая
       10

Интернет проводник и поплавки: объясните пожалуйста

4 голосов
/ 06 мая 2009

Вчера кто-то спросил Ширина, поглощающая элементы HTML . Я представил два решения : одно на основе таблицы и одно чистое CSS. Теперь чистый CSS хорошо работает в Firefox и Chrome, но не в IE.

В основном, поплавки спускаются к следующей строке. Насколько я понимаю (и поведение FF и Chrome), этого не должно быть, потому что левые элементы div являются элементами блочного уровня, которые поплавки должны игнорировать.

Полный пример кода приведен ниже. Добавление DOCTYPE для принудительного включения IE в совместимый со стандартами режим помогает немного, но проблема остается.

Итак, мой вопрос: я ошибаюсь в своем понимании чисел с плавающей точкой или это проблема IE?

Что более важно, как мне заставить это работать в IE? Это чертовски мучает меня. 

<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>

Ответы [ 2 ]

7 голосов
/ 07 мая 2009

Поплавки переносятся на следующую строку из-за width: 270px в строках. Это происходит в IE6 / 7 из-за его сломанной модели с плавающей точкой . IE помещает элементы с плавающей точкой рядом с цветными элементами строки вместо их наложения, но поскольку их общая ширина больше ширины обертки, цветные строки опускаются до следующей строки.

Если вам действительно нужна максимальная ширина 270 пикселей для этих цветных полос, вы можете использовать max-width. Это не работает в IE6, поэтому, если это действительно важно, вам нужно обойти это.

0 голосов
/ 26 марта 2010

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

<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="row1"><div class="text">FOO</div></div>
<div id="row2"><div class="text">BAR</div></div>
<div id="row3"><div class="text">THESE PRETZELS ARE</div></div>
<div id="row4"><div class="text">MAKING ME THIRSTY</div></div>
<div id="row5"><div class="text">BLAH</div></div>
<div id="row6"><div class="text">BLAH</div></div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...