Разные отступы в IE & Opera

Slyfox · January 31, 2008

Слева разные отступы в IE и Opera, то есть не везде, а только возле первого столбца блоков.

Что в этом случае можно сделать?

не могу понять откуда IE берет дополнительные пикселы

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.content{
	height: 100px;
	width: 100px;
	background: #fff;
	float: left;
	margin: 20px;
}
</style>
</head>

<body>


<div style="width: 100%; background: #d6edd3;">
Слово<br clear="right">
<div class="content">1 1 1</div>
<div class="content">2 2 2</div>
<div class="content">3 3 3</div>
<div class="content">4 4 4</div>
<div class="content">5 5 5</div>
<div class="content">6 6 6</div> 
<div class="content">7 7 7</div>
<div class="content">8 8 8</div> 
<div class="content">9 9 9</div>
<div class="content">10 10 10</div>
<div class="content">11 11 11</div>
<div class="content">12 12 12</div>
<br clear="left">
</div>


</body>
</html>

Vlad · February 1, 2008

Добавь _margin-left: 10px; к стилю content.

nvgudz · February 1, 2008

Есть такая трабла с ИЕ до 7 версии (марджинг плавающего элемента на новую строку переносить)

Решается добавлением еще одного блочного элемента в див class="content". Соотвественно, немного стили меняются.

<style type="text/css">
.content{
 position: relative;
float: left;
clear: inherit;
padding: 20px; /* можно паддинг не ставить, тогда у .content span добавить марджинг на 20рх */
}
.content span{
height: 100px;
width: 100px;
background: #fff;
display: block;
}
</style>

В html-e все просто:

<div style="width: 100%; background: #d6edd3;">
Слово<br clear="right">
<div class="content"><span>1 1 1</span></div>
<div class="content"><span>2 2 2</span></div>
<div class="content"><span>3 3 3</span></div>
<div class="content"><span>4 4 4</span></div>
<div class="content"><span>5 5 5</span></div>
<div class="content"><span>6 6 6</span></div> 
<div class="content"><span>7 7 7</span></div>
<div class="content"><span>8 8 8</span></div> 
<div class="content"><span>9 9 9</span></div>
<div class="content"><span>10 10 10</span></div>
<div class="content"><span>11 11 11</span></div>
<div class="content"><span>12 12 12</span></div>
<br clear="left">
</div>

P.S.: вместо span c display: block можно просто див использовать (по необходимости, сложности, желанию)

lank · February 5, 2008

Как варинат (скорее хак) прописать плавающему элементу (в вашем случе .content)

display:inline

orangestar · March 13, 2008

спасибо, lank.

очень полезное и эффективное решение!

Sign In

Разные отступы в IE & Opera

Question

Slyfox

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

nvgudz

Link to comment

Share on other sites

lank

Link to comment

Share on other sites

orangestar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information