Что такое ошибка IE CSS? (Двойная вертикальная прокладка)

(Обратите внимание, что это не ошибка с двойным краем. На данный момент я называю эту ошибку с двойной вертикальной ошибкой, если у кого-то еще нет более умного/задокументированного имени для этого?)Что такое ошибка IE CSS? (Двойная вертикальная прокладка)

Как раз тогда, когда я думал, что видел все причудливые ошибки IE CSS, я подготовил простой тестовый пример, который продолжает меня путать. Следующая страница выглядит и отлично работает в FF, Opera и др. Однако IE 6 и IE 7 кажутся запутанными. Я дам документ, который я вставляю ниже, говорит сам за себя.

Edit: Я поместил это по следующему адресу: http://jsbin.com/efele
открыть его в IE и снова в FF. Сравните.

Мой вопрос: что называется этой ошибкой? (Я пропустил это где-то? Найден ли это на this page?) Я знаком с ошибкой триггера 3px и двойной (горизонтальной) ошибкой -margin и множеством других ошибок, связанных с float. Но ... дублируется вертикальное заполнение? (И положить в неправильном месте, в ботинке.)

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>IE bork!</title> 
<style type="text/css"> 
html, body { 
margin:0; 
padding:0; 
} 
#container { 
border:1px solid red; 
background-color:#CC99CC; 
width:800px; 
margin:0 auto; 
padding-top:100px; 
} 
#sidebar { 
float:left; 
display:inline; 
width:200px; 
border:1px solid blue; 
background-color:#00CCFF; 
} 
#content { 
float:right; 
display:inline; 
width:510px; 
border:1px solid green; 
background-color:#66CC99; 
} 
.clear { 
clear:both; 
/* height:0px; <<< setting height seems to be the only thing that makes this work as expected?!? */ 
background-color:#CCCCCC; /* bg color here is just for debugging */ 
} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="sidebar">I am the sidebar</div> 
    <div id="content">I am the content</div> 
    <div class="clear"><!-- clear! --></div> 
</div> 
<p>There should be 100px of space above the two floats, but <em>no</em> space below them...</p> 
</body> 
</html>

постскриптум, я в конце концов выяснить, как ублажить IE на этом. Решение (явно задающее высоту в моем «ясном» div) закомментировано, чтобы показать ошибку. Мне только жаль, что я не смогу вернуть последние несколько часов своей жизни, чтобы мне пришлось споткнуться о реальной проблеме/решении!

Спасибо!

источник

2009-12-01 Funka

Данное решение, как вы понимаете, является hasLayout IE quirk. (Явной установка высоты на вашей ясной DIV установлена hasLayout к true в глазах IE)

источник

2009-12-01 04:47:00 JasonWyatt

Я надеялся на забавное/умное имя, например, на сайте, на котором вы были связаны; Полагаю, мне придется довольствоваться чем-то скучным !! – Funka

На стороне записки, в тех случаях, когда задающие высоту не будет работать по какой-то причине, я обнаружил, что часто в том числе zoom:1; в любое время, когда мне нужно hasLayout для запуска в IE, был спасателем. В любое время, когда я сталкиваюсь с этими типами странных проблем с макетами в IE, я всегда стараюсь, чтобы увидеть, является ли это проблемой обновления макета в первую очередь. (Тогда, если это не сработает, переходите к удару головой по клавиатуре)

источник

2009-12-01 05:10:08

Спасибо. Мне тоже нравится подшучивание! – Funka

Что такое ошибка IE CSS? (Двойная вертикальная прокладка)

ответ

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