IE7 и проблема с фиксированными div

Задний план

Мне нужно сделать довольно сложный макет для клиента, используя фиксированный DIV. В IE8, FF3 и Chrome все нормально, но IE7 все исправляет.

Изменить: Фиксированные DIV являются обязательными, только содержимое DIV должно прокручиваться (это спецификация, извините)

HTML и CSS код

<!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=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px;  height: 600px;  top: 10px;  border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 680px; float: left; background: white; margin-left: 185px;  min-height: 600px;  border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 


</body>
</html>

Ширина IE8, FF3 и Chrome

http://img39.imageshack.us/img39/406/firefoxkpd.jpg

Ширина IE7

IE7 http://img23.imageshack.us/img23/1315/ie7l.jpg

Примечания

Меня не так беспокоит IE6, потому что я знаю, что он не поддерживает Fixed элементы, но если вы знаете, как это исправить, отлично!

Вопросы

  1. Что мне нужно знать об ошибках IE7, чтобы исправить проблему?
  2. Как я могу ссылаться на левую часть столбцов заголовка относительно оболочки
  3. Почему столбец заголовка идет вправо, а правый столбец исчезает?

layout css incompatibility fixed
person Eduardo Molteni    schedule 04.08.2009    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Нашел исправление !! Достаточно странно плавающее содержание, чтобы right это исправить!
Зарабатываю ли я файл cookie?

<!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=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px; height: 600px;   top: 10px; border: 1px solid blue;">
      header
    </div>

    <div id="content" style="float: right; width: 680px; margin-right: 90px; height: 600px; border: 1px solid lime;">
        content
    </div>    

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>


</div> 


</body>
</html>
person Eduardo Molteni    schedule 04.08.2009

arrow_upward
0
arrow_downward

Что насчет этого:

<!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=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="float: left; width: 185px;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 650px; float: left; background: white; left: 185px;  min-height: 600px; height: 600px;      border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="float: left; top: 10px; width: 90px; left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

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

Он работает в IE7, Firefox, Opera, Safari и Chrome. Думаю, он будет работать и в IE6, и в IE8. Мне пришлось уменьшить ширину «содержимого», потому что оболочка (rightcolumn + content + header) ‹

person Diego Jancic    schedule 04.08.2009
comment
Я не использовал фиксированные div, но думаю, что это не обязательно, если он работает. Это? - person Diego Jancic; 04.08.2009
comment
Ваше решение не удалось обработать должным образом. Я пробовал это на 24-м мониторе под управлением IE7. Есть дополнительная правая колонка. - person Michael Brown; 04.08.2009
comment
Это не лишний правый столбец, это оболочка, которая больше всех дочерних div. (185 + 650 + 90) = 925 ›960 - person Diego Jancic; 04.08.2009

arrow_upward
0
arrow_downward

Фиксированная позиция не работает в старых браузерах. Вы можете размещать элементы рядом друг с другом.

Также укажите нулевое заполнение для тела, Opera использует заполнение по умолчанию вместо поля (что на самом деле имеет больше смысла).

Я помещаю стили в таблицу стилей, чтобы код был чище:

<!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=iso-8859-1" />
<title>test</title>

<style type="text/css">
body { margin: 10px; padding: 0; }
#wrapper { width: 960px; margin: 0 auto; border: 1px solid red; overflow: hidden; }
#header { float: left; width: 185px; height: 600px; border: 1px solid blue; }
#content { float: left; width: 680px; background: white; min-height: 600px; border: 1px solid lime; }
#rightcolumn { float: left; width: 89px; height: 600px; border: 1px solid maroon; }
</style>

</head>
<body>

<div id="wrapper">
   <div id="header">
      header
   </div>
   <div id="content">
      content
   </div>
   <div id="rightcolumn">
      right
   </div>
</div> 

</body>
</html>
person Guffa    schedule 04.08.2009
comment
Проблема в столбцах fixed. Я не считаю IE7 более старым браузером, и он поддерживает фиксированные div (или, по крайней мере, так говорится в руководстве). - person Eduardo Molteni; 04.08.2009

arrow_upward
0
arrow_downward 

<!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=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="width: 185px; float: left;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 680px; float: center; background: white; margin-left: 185px;  min-height: 600px;      border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 95px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 


</body>
</html>

Это должно сработать!

person Michael Brown    schedule 04.08.2009

arrow_upward
0
arrow_downward

Если приемлемы решения на основе сценариев, то у меня был некоторый успех с фиксированными div (не обязательно с использованием вашего макета) с помощью сценарии обновления, которые исправляют поведение IE, чтобы оно больше соответствовало требованиям стандартов.

person Steve Gilham    schedule 04.08.2009
comment
Я пробовал, но не работает. Дело в том, что IE7 якобы поддерживает фиксированные DIV, но не знает, как сохранить заголовок слева и правый столбец справа. - person Eduardo Molteni; 04.08.2009