CSS проблема с плавающей точкой в IE6 и IE7

У меня есть вопрос поплавка в IE6 & ie7:CSS проблема с плавающей точкой в IE6 и IE7

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>lily</title> 
    <style> 
     div{width: 100px; height: 100px;} 
     .div1{background: red; float: left;} 
     .div2{background: yellow;} 
    </style> 
    </head> 
    <body> 
     <div class="div1">div1</div> 
     <div class="div2">div2</div> 
    </body> 
</html>

почему он показывает разные в IE6 & & IE7 и Chrome? И как его решить в ie6 & ie7?

источник

2013-12-02 阳光Emi

Что вы хотите, чтобы произошло? – sheriffderek

Я хочу знать, почему он отображает разные версии IE6 && IE7 и Chrome? –

Но что вы хотите, чтобы он отображался? Бок о бок? На вершине друг друга? Между вашим кодом и вашими снимками экрана я не мог сказать, что вы хотите, чтобы это выглядело. – sheriffderek

Ваш второй div очищает ваш первый, но только текст. Если вы установите левое поле, вы можете сказать, что он сидит рядом с плавающим div.

http://jsfiddle.net/Pjvtb/

.div2 { 
    margin-left: 100px; /* new line */ 
    background: yellow; 
}

Примечание: IE 6 и 7 неправильно перемещения второго div мимо первого, из-за hasLayout. Вы можете искать в Интернете дополнительную информацию о проблемах, связанных с этим. Существует также текстовый пробел , присутствующий в IE 6 (возможно, 7 тоже, я не помню), что обычно означало, чтобы отображать одно и то же во всех браузерах, на самом деле можно было бы сделать margin-left: 103px для размещения странности IE.

источник

2013-12-02 03:47:12 Ming

На самом деле, я хочу знать, как сделать ie6 и ie7 отображать его как хром, потому что это ошибка ie? –

Ошибка в том, что элемент очищает поплавок без значения; если точка состоит в том, чтобы иметь два 'div' бок о бок с разными цветами, тогда достижение этого требует, чтобы Chrome выглядел как IE. Если вы хотите, чтобы IE выглядели так, как выглядит Chrome в настоящее время, вам вообще не нужен «background-color» в div, просто добавьте «clear: left;» в '.div2'. – Ming

Прежде всего, попробуйте оба с плавающими div и посмотрите, что произойдет.

HERE - это FIDDLE с каждым сценарием для тестирования.

/* yours */ 
.yours div { 
    width: 100px; 
    height: 100px; 
} 

.yours .div1 { 
    background: red; 
    float: left; 
} 

.yours .div2 { 
    background: yellow; 
} 


/* mine */ 
.mine div { 
    width: 100px; 
    height: 100px; 
    float: left; 
} 

.mine .div1 { 
    background: red; 
} 

.mine .div2 { 
    background: yellow; 
} 


/* mine with a cleared float */ 
.mine-too div { 
    width: 100px; 
    height: 100px; 
    float: left; 
} 

.mine-too .div1 { 
    background: red; 
} 

.mine-too .div2 { 
    background: yellow; 
    clear: left; 
    /* not BOTH - you only need left - there is no right... */ 
}

источник

2013-12-02 04:06:41 sheriffderek

<!DOCTYPE html> 
<html> 
<head> 
<title>lily</title> 
<style> 
    div{width: 100px; height: 100px;} 
    .div1{background: red; float: left;} 
    .div2{background: yellow; clear:both;} 
</style> 
</head> 
<body> 
    <div class="div1">div1</div> 
    <div class="div2">div2</div> 
</body>

enter image description here

источник

2013-12-02 06:04:39

CSS проблема с плавающей точкой в ​​IE6 и IE7

ответ

Смежные вопросы

CSS проблема с плавающей точкой в IE6 и IE7