IE7 및 고정 된 DIV 문제

StackOverflow https://stackoverflow.com/questions/1228536

문제

배경

고정 된 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

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. 헤더 열이 오른쪽으로 이동하고 오른쪽 열이 사라지는 이유는 무엇입니까?
도움이 되었습니까?

해결책

수정을 찾았습니다 !! 콘텐츠를 떠 다니는 이상한 right 그것을 수정하십시오!
쿠키를 얻습니까?

<!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>

다른 팁

이건 어때 :

<!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) <래퍼이기 때문에 "콘텐츠"의 너비를 줄여야했습니다.

고정 된 위치는 이전 브라우저에서 작동하지 않습니다. 당신은 서로 옆에 요소를 떠올 수 있습니다.

본체의 제로 패딩도 지정하여 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>

<!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>

그렇게해야합니다!

스크립트 기반 솔루션이 허용되는 경우 Dean Edwards를 사용하여 고정 된 DIV (반드시 레이아웃을 사용하지는 않음)에서 약간의 성공을 거두었습니다. 스크립트 업그레이드 어떤 패치가 표준과 비슷한 동작이 나타나는지는 어떤 패치를 나타냅니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top