IE 6 и overflow: hidden для блока с картинкой. Я чего-то не понимаю или информации о баге нет в справочнике?

KooL · January 14, 2011

Возьму самый простой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>1</title>
		<style type="text/css">
			img {
				width: 500px;
				height: 500px;
				}
			div {
				overflow: hidden;
				}
		</style>
	<body>
		<div>
			<img src="image.jpg" alt="image" title="image">
		</div>
	</body>
</html>

Во всех браузерах нет горизонтальной прокрутки, если картинка не умещается в экран, а в IE 6 есть. В более сложной структуре документа, чем из примера, это может вылиться в некоторые неприятности. Есть ли решение проблемы чисто на html, css? Толь не стоит рассказывать про width: 100% и фоновую картинку чисто для IE 6 через комментарии. Если это баг IE 6, то информацию в справочник бы внести.

psywalker · January 14, 2011

Я вижу такое решение, но не пойму почему о нём нельзя рассказывать.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>1</title>
		<style type="text/css">
			span {
				display: block;
				width: 500px;
				height: 500px;
				background: red;
				}
			div {
				overflow: hidden;
				width: 100%;
				}
		</style>
	<body>
		<div>
			<span>dfdf</span>
		</div>
	</body>
</html>

KooL · January 14, 2011

Спасибо. width: 100% я имел ввиду для картинки, а не блока. Не вижу логики в решении, почему width: 100% помогает?

Mr.Black · January 14, 2011

Не вник в суть ,но может overflow: auto; поможет.

KooL · January 14, 2011

Да не, у меня не проблема, а спортивный интерес)

psywalker · January 14, 2011

Спасибо. width: 100% я имел ввиду для картинки, а не блока. Не вижу логики в решении, почему width: 100% помогает?

Потому что див теперь понимает, от чего плясать.

KooL · January 14, 2011

Значит мой код с недочётом и всегда лучше указывать ширину для таких случаев, даже если поддержка IE 6 не нужна или это такое особое поведение IE 6?

psywalker · January 15, 2011

Значит мой код с недочётом и всегда лучше указывать ширину для таких случаев, даже если поддержка IE 6 не нужна или это такое особое поведение IE 6?

Да нет, необязательно. Блочные элементы по умолчанию имеют ширину 100%. Это чисто недочёт именно ИЕ6.

Sign In

IE 6 и overflow: hidden для блока с картинкой. Я чего-то не понимаю или информации о баге нет в справочнике?

Question

KooL

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

KooL

Link to comment

Share on other sites

Mr.Black

Link to comment

Share on other sites

KooL

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

KooL

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information