Занятный глюк IE7

SelenIT · May 26, 2010

Наткнулся на занятную пакость в IE7, вот минимальный пример:

<!DOCTYPE HTML>
<html>
<head>
<title>Пример</title>
<style>
p { margin: 0; padding: 0; }
div { padding: 2px; }
</style>
</head>
<body>
<div style="width: 72%; float: left; background: #fcc;">
	<div>
		<div style="margin-bottom: 40px; width: 90%; background: #ccc;">
			<p>Отступ задан только здесь, с последующим блоком никак не связан...</p>
		</div>
	</div>
	<div style="width: 60%; float: left; background: #cfc;">
		<div style="width: 90%; background: #fff;">
			<p>Откуда же в IE7 берется отступ под этим блоком?</p>
		</div>
	</div>
	<!-- ...а если раскомментить это?;)  -->
</div>
</body>
</html>

В нормальных браузерах белый блок прижат к нижней рамке. В IE7 под ним, как и сверху, рисуется 40px розового. Если раскрыть коммент или добавить что угодно в нормальном потоке, он прижимается . Но мне нужно найти решение без дополнительного кода...

Подскажите, пожалуйста, куда копать?

psywalker · May 26, 2010

Интересный баг, я ещё такой не видел)) Кстати, в ИЕ6 он лечится путём задавания отриц.марджинов главному блоку

А вот в ИЕ7 можно конеш задать тоже самое последнему блоку, либо убрать флоат,походу проблема в нём, но тогда в других не будет кросса. Или задать уже отдельно для ИЕ7 в комментах.

А ещё можно обернуть в родителя и ему хайден влепить, как положено.

SelenIT · May 26, 2010

psywalker, спасибо! "Изоляция" блока с отступом в отдельный контекст (обертку с overflow:hidden) помогла!

rash · May 26, 2010

Без дополнительного кода, получается, никак. Я пока не вижу решения без изменения разметки -(

Мне помогло указать для нижнего блока float:none, тут уже было замечено :-)

А почему мы не можем так сделать?

P.S.: А еще мы можем после последнего блока вставить <br>

Возможно, это будет безопаснее.

P.P.S.:

А нужен был всего один зум — тоже не сам, надо заметить, нашел :-(

<!DOCTYPE HTML>
<html>
<head>
<title>Пример</title>
<style>
p { margin: 0; padding: 0; }
div { padding: 2px; }
</style>
</head>
<body>
<div style="width: 72%; float: left; background: #fcc;">
	<div style="zoom: 1;">
		<div style="margin-bottom: 40px; width: 90%; background: #ccc;">
			<p>Отступ задан только здесь, с последующим блоком никак не связан...</p>
		</div>
	</div>
	<div style="width: 60%; float: left; background: #cfc;">
		<div style="width: 90%; background: #fff;">
			<p>Откуда же в IE7 берется отступ под этим блоком?</p>
		</div>
	</div>
	<!-- ...а если раскомментить это?;)  -->
</div>
</body>
</html>

SelenIT · May 26, 2010

rash, спасибо! Да, получается, нужно было любым способом "выбить" блок с отступом в отдельный контекст форматирования. Overflow:hidden и hasLayout (любым способом) - подходящие варианты.

clavin · May 26, 2010

Какая хрень всётаки бывает

psywalker · May 26, 2010

Ахренеть, старый добрый зуум всех спас, а ИЕ всё же тайнами полнится

Sign In

Занятный глюк IE7

Question

SelenIT

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information