MSIE и overflow hidden

petrzverev · December 14, 2011

Верстается div-ная страница. Расклад — центр всё время по середине, тянется. Например способом, уведённым у самизнаетекого:

CSS


#main {width:100%; clear:both; overflow:hidden; position:relative;}
#main:after {content:''; display:block; clear:both;}
#main_toleft {position:relative; right:50%; float:right;}
#main_toright {width:1600px; position:relative; z-index:1; right:-50%;}

HTML


<div id="main">
<div id="main_toleft">
<div id="main_toright">
<img src="/ima/image.jpg" width="1600" height="400" />
</div>
</div>
</div>

Смысл — прятать левую и правую стороны картинки за окна браузера, когда у пользователя малые разрешения монитора. Прятать надо, разумеется, так, чтобы не появлялись слайдеры. В данном случае, ширину картинки в 1600 пикселей я принял за достаточную. Может быть и больше, не суть важно. В общем, центральная часть картинки видна всё время, по середине. А с увеличением разрешения монитора, будут открываться и её бока.

Схема работает во всём, кроме Internet Explorer. В нём картинка (а по сути — div-ный блок) отображается левой частью. Всё то, что справа — прячется под правую границу браузера. Ни какого намёка на расположение картинки по центру, что есть упадок моего и без того подоравнного сознания. Поправьте мне его пожалуйста какой-нибудь хитрой конструкцией, чтобы я её вставил через  например.

Nagibaka · December 14, 2011

А не пробывал картинку запихнуть в бэкграунд и выровнять по центру при помощи background-position, тогда и оверфлоу не понадобится.

Кстати right,top,left,bottom работают только у абсолютно позиционированных элементов(напр. position:absolute;)

Также можешь попробывать выставить для #main_toright{ margin:0 auto;}

petrzverev · December 14, 2011

Нет, не пробовал. Во-первых, это был бы частный случай и выходил бы за рамки задачи темы. Во-вторых, картинка не бесконечна и на бэк уже занят — на него я кладу фоновую.

CharlieCruz · December 15, 2011

Немного переделал ваш код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Project title</title>
	<style type="text/css">
		body {
			margin:0;
			min-width:900px;
		}
		#main {
			position:relative;
			width:100%;
			overflow:hidden;
		}
		#main_toleft {
			position:relative; 
			left:50%;
		}
		#main_toright {
			position:relative;
			width:1600px;
			margin-left:-800px;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="main_toleft">
			<div id="main_toright">
				<img src="http://static.tumblr.com/hhsii55/5XQlqjada/nature7.jpg" width="1600" height="600" alt="" />
			</div>
		</div>
	</div>
</body>
</html>

Код можно упростить, убрать одну вложенность:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Project title</title>
	<style type="text/css">
		body {
			margin:0;
			min-width:900px;
		}
		#main {
			position:relative;
			width:100%;
			overflow:hidden;
		}
		.main-holder {
			position:relative;
			left:50%;
			width:1600px;
			margin-left:-800px;
		}
	</style>
</head>
<body>
	<div id="main">
		<div class="main-holder">
			<img src="http://static.tumblr.com/hhsii55/5XQlqjada/nature7.jpg" width="1600" height="600" alt="" />
		</div>
	</div>
</body>
</html>

petrzverev · December 17, 2011

К сожалению, тоже не универсально. Дискриминируется довольно распространённое разрешение «800?600» и ниже.

Всё-таки хотелось бы способа борьбы с недопониманием у Интернет Эксплорера.

Edited December 17, 2011 by petrzverev

CharlieCruz · December 17, 2011

Дискриминируется довольно распространённое разрешение «800?600» и ниже.
Всё-таки хотелось бы способа борьбы с недопониманием у Интернет Эксплорера.

Если нужна поддержка разрешения < 800x600 поменяйте значение min-width на нужное (например 600px) или min-width можно убрать совсем и тогда горизонтальный скролл не появится при любом разрешении.

Принцип работы моего примера такой же как и в примере который дали вы. "Например способом, уведённым у самизнаетекого:" честно говоря не знаю чей это способ но сделан он как то задом наперед. В вашем примере проблема заключается в позиционировании справа налево #main_toleft {position:relative; right:50%; float:right;} просто в ie6-7 такой блок будет позиционироватся не от правой границы блока #main, а от условной границы где заканчивается блок #main_toleft ширина которого в вашем случае 1600px. Возможно это не совсем понятное и правильное объяснение но на словах сложно пояснить почему не работает в ie.

Я же предложил вариант где блок позиционируется слева направо. При этом идея в обоих примерах одинаковая.

Edited December 17, 2011 by CharlieCruz

petrzverev · December 18, 2011

От души благодарю. Сразу не догадался поиграться с числами. Теперь знаю — кого доставать, есличо.

Sign In

MSIE и overflow hidden

Question

petrzverev

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Nagibaka

Link to comment

Share on other sites

petrzverev

Link to comment

Share on other sites

CharlieCruz

Link to comment

Share on other sites

petrzverev

Link to comment

Share on other sites

CharlieCruz

Link to comment

Share on other sites

petrzverev

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information