HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Однопиксельный отступ в ИЕ6 при right:0

Вы наверно встречались, если нет, тогда вам предстоит встретиться с еще одним багом в ие6. Суть его заключается в том, что у абсолютно спозиционированного элемента с параметром right:0 то появляется, то пропадает отступ справа в 1px.

Нда, что написал сам не понял %). Суть бага проще показать на примере:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!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" />
<title>Однопиксельный отступ в ие6</title>
<style type="text/css">
.container {
	width:70%;
	margin:0 auto;
	height:200px;
	background:#F00;
	position:relative;
}
.box {
	width:50px;
	height:50px;
	background:#060;
	position:absolute;
	top:0;
	right:0;
}
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
</div>
</body>
</html>

При ресайзе окна в ие6 видно, что зеленый квадратик .box то плотно прилипает к правому краю, то появляется отступ:

баг ie6 отступ в 1px

Суть проблемы состоит в том, что ие6 магическим образом некорректно задает right:0 при нечетном размере ширины внешнего контейнера.

Решается эта проблема появления однопиксельного отступа в ie6 следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!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" />
<title>Однопиксельный отступ в ие6</title>
<style type="text/css">
.container {
	width:70%;
	margin:0 auto;
	height:200px;
	background:#F00;
	position:relative;
}
.box {
	width:50px;
	height:50px;
	background:#060;
	position:absolute;
	top:0;
	right:0;
	_left:-50px; /* Это значение равно ширине данного блока */
	_margin-left:100%;
}
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
</div>
</body>
</html>

Теперь этот лишний отступ пропал и зеленый квадратик всегда плотно прилегает к правому краю.

Метки: ,

Запись опубликована 25.08.2009 в 15:37 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (4) на “Однопиксельный отступ в ИЕ6 при right:0”

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос