IE7 поплавковые проблемы

Html =>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

У меня проблемы с IE7 (поддержка IE6 не нужна)

На IE7 визуализированный HTML выглядит так =>

Мне нужно, чтобы это выглядело так (сейчас работает на chrome/ie8) =>

Что я должен изменить? :)

Ответ 1

Вам нужно сместить оба элемента и очистить его.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

Или просто поместите плавающий элемент перед нормальным элементом следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

Краткое пояснение:

Простите мой английский и рисунок, но здесь кратко, как float и clearing работают в кросс-браузере:

Элемент можно перемещать влево или вправо. Когда у вас есть элемент, плавающий, элемент не нажимает "нормальный" контент вниз. Смотрите, почему -

Поплавок и очистка:

Легенда: оранжевый/плавающий правый, синий/плавающий влево, серые линии/прозрачный разделитель, красный цвет/граница

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

Когда вы используете clear:both ниже поплавков, содержимое под поплавками будет вытолкнуть до того уровня, который имеет самый высокий уровень поплавка. Это показано на диаграмме 2-й и 3-й части.

Только плавающий:

Легенда: оранжевый/плавающий правый, синий/нормальный контент, серые линии/линия, которая делится со следующей, красная граница/границы

Синий нормальный контент уже по умолчанию text-align: left;. Таким образом, он левый ориентирован. Вам нужно, чтобы float находился перед нормальным контентом, потому что вы говорите браузеру плавать из этой строки.

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

Ответ 2

Всегда полезно для всех IE-Float-Combos: дайте каждому float-элементу display: inline;

Ответ 3

Попробуйте очистить после исправления:

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}