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

«
»

Двойной маргин в ие6 у float элементов

Маленькая заметочка про еще один баг у ие6. Если у float-элемента задать margin-left или margin-right, то в ие6 он будет в 2 раза больше чем в остальных браузерах. Как с этим бороться, читайте ниже.

Ну а бороться с этим можно, если позволяет дизайн, заменой margin на padding, а если нет, то, например, css хаками:

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

<!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>Документ без названия</title>
<style>
.box {
	width:200px;
	height:200px;
	border:1px solid #000;
}
.box div {
	width:100px;
	height:100px;
	float:right;
	margin-right:20px;
	_margin-right:10px; /* Использум хак для ие6 */
	background:#F00;
}
</style>
</head>
<body>
<div class="box">
  <div></div>
</div>
</body>
</html>

Как вы видите из кода, для шестого ие черз css хак мы просто указываем маргин в 2 раза меньше.

Метки: , ,

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

Комментарии (2) на “Двойной маргин в ие6 у float элементов”

  • rezonans:
    06.05.2010 в 01:28

    это все фигня, во первых, баг появляется только если есть флоат в 1 сторону и маргин в ту же самую (если маргин в другую, то баг тоже иногда бывает, но о4ень редко), во-вторых, для 6 ИЕ это лечится добавлением св-ва display:inline без никаких хаков. Удачи.

  • vital:
    21.12.2011 в 17:36

    на Портале игр я такого не встречал.. Может вы увидете?

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

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



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

Облако тегов

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

Опрос