Проблемы с плавающей запятой в IE7

StackOverflow https://stackoverflow.com/questions/1820007

Вопрос

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 выглядит так =>
alt text

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

Что мне следует изменить?:)

Это было полезно?

Решение

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

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

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

Простите за мой английский и рисование, но вот вкратце, как работает плавание и очистка в кроссбраузерном браузере:

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

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

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

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

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

Только плавающее:

alt text
Легенда:Оранжевый/Плавающий вправо, Синий/Обычное содержимое, Серые линии/линия, разделенная со следующей, Красный Прямоугольник/границы

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

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

Другие советы

Всегда полезно для всех IE-Float-Combo:Присвойте каждому элементу с плавающей запятой display: inline;

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

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top