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 выглядит так =>
http://i48.tinypic.com/saxs9d.jpg

Мне нужно, чтобы это выглядело так (сейчас работает на chrome/ie8)=>
http://i49.tinypic.com/2ufgbr4.jpg

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

Источник

3 ответа

Решение

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

<!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>

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

Прошу прощения за мой английский и рисование, но вот кратко, как с плавающей точкой и очистка работает в кросс-браузере:

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

Плавать и очистить:

альтернативный текст
Обозначения: оранжевый / поплавок справа, синий / поплавок слева, серые линии / прозрачный разделитель, красный прямоугольник / границы

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

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

Только с плавающей точкой:

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

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

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

Источник

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

Источник

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

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
Источник
Другие вопросы по тегам