Проблема relative версткой в ИЕ 7

rogoziol · September 12, 2008

Возникает проблема при скролинге в ИЕ7 (в ФФ2, ФФ3, Хроме и Опере все нормально). Хочется сделать чтобы при скролинге в ИЕ 7, контент из зеленого div'а не ползал за скроллингом.

Пример ниже.

Заранее спасибо.

<!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=utf-8" />
</head>

<body style="position: relative">
	<div style="height: 500px; width: 635px; border: dotted 4px green; overflow: auto;">
		<div style="width: 605px;">
		<div style="width: 290px; border: solid 2px red; float: left; margin: 4px;">
			<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd;">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>
			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

		</div>
		<div style="width: 290px; border: solid 2px red; margin: 4px; float: left;">
			<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd; ">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>
			<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: green;  ">
				<div style="position: relative">
				 <p style="min-height: 0px;">relative test</p>
				</div>
			</div>
			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd;">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

		</div>
		</div>
	</div>
</body>

</html>

ZoNT · September 12, 2008

<!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=utf-8" />
</head>

<body>
<div style="height: 500px; width: 635px; border: dotted 4px green; overflow: auto;">
<div style="width: 605px;">
<div style="width: 290px; border: solid 2px red; float: left; margin: 4px;">
<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd;">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>
<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

</div>
<div style="width: 290px; border: solid 2px red; margin: 4px; float: left;">
<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd; ">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>
<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: green; ">
<p>relative test</p>
</div>
<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd;">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>

</div>
</div>
</div>
</body>
</html>

Ну или вот так:

<!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=utf-8" />
</head>

<body style="position: relative;">
<div style="position: relative; height: 500px; width: 635px; border: dotted 4px green; overflow: auto;">
	<div style="position: relative; width: 605px;">
		<div style="position: relative; width: 290px; border: solid 2px red; float: left; margin: 4px;">
			<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd;">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>
			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

		</div>
		<div style="position: relative; width: 290px; border: solid 2px red; margin: 4px; float: left;">
			<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd; ">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>
			<div style="position: relative; width: 280px; border: dotted 2px blue; margin: 3px; background-color: green; ">
				<div style="position: relative;">
					<p style="min-height: 0px;">relative test</p>
				</div>
			</div>
			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px; background-color: #dddddd;">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>

			<div style="width: 280px; border: dotted 2px blue; margin: 3px;background-color: #dddddd; ">
				1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
			</div>
		</div>
	</div>
</div>
</body>
</html>

rogoziol · September 12, 2008

Да действительно второй вариант помог(я забыл сказать, что необходимо чтобы у содержимого в зеленом диве было relative позиционирование, поэтому 1 вариант неподходит). Хотя я думал, что проблема в ИЕшном свойстве hasLayout у элементов, а все оказалось куда проще. Спасибо огромное.

Sign In

Проблема relative версткой в ИЕ 7

Question

rogoziol

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

rogoziol

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information