Position: behoben - Problem in IE6.

Ich habe viele Artikel gesucht, die ie6 konnte nicht unterstützen Position: behoben, und vielleicht Position: absolute und oberste Position. Aber ich habe viele Male versucht, kann nicht gut funktionieren. Kann jemand mir helfen, meinen Code zu ändern? (Die effection ist, dass mein Code Show in IE8)Position: behoben - Problem in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
html, body{width:100%;height:100%;margin:0;padding:0;background-color:#fff;} 
#headerwarp{width:100%;height:78px;margin:0;padding:0;position:fixed;left:0;top:0;z-index:10;} 
#headertop{width:100%;height:28px;margin:0;padding:0;background-color:blue;position:fixed;left:0;top:0;z-index:10;} 
#headerbottom{width:100%;height:50px;margin:0;padding:0;background-color:green;position:fixed;left:0;top:28px;z-index:10;} 
#footerwarp{width:100%;height:53px;margin:0;padding:0;position:fixed;left:0;bottom:0;z-index:10;} 
#footerbottom{width:100%;height:65px;margin:0;padding:0;background-color:#000;z-index:10;} 
#localcontent{width:100%;margin:0;padding:78px 0 105px 0;top:0;} 
#content1{position:fixed;width:100%;height:20px;margin:0;padding:0;background-color:#ff0;z-index:10;top:78px;} 
#content2{position:fixed;width:100%;height:25px;margin:0;padding:0;background-color:#f00;z-index:10;top:98px;} 
.box{width:100%;position:relative;top:45px;padding:0;margin:0;} 
.slide {margin:10px;} 
.sl{width:100%;} 
li{margin:0 0 5px 0;padding:0;list-style:none;} 
ul li,li{width:400px;overflow:hidden;position:relative;} 
.contenttop{height:25px;position:fixed;z-index:10;top:123px;padding:0;margin:0;width:290px;background-color:#0FF;} 
.contentbottom{width:400px;float:left;padding:0;margin:0;height:1000px;} 
.col1, .col2, .col3{float:left;padding:0;margin:0 3px 0 3px;} 
.pcol1, .ptcol1{float:left;margin:0 0 6px 0;} 
.ptcol1{text-align:center;font-size:14px;color:#222;font-weight:bold;padding:0;position:fixed;z-index:10;top:148px;background:#f00;} 
.pcol1{padding:2px;position:relative;top:30px;background:#ff0;} 
.col1, .ptcol1{width:139px;} 
.pcol1{width:135px;} 
</style> 
</head> 
<body> 
<div id="headerwarp"> 
<div id="headertop"> 
    </div> 
    <div id="headerbottom"> 
    </div> 
</div> 
<div id="localcontent"> 
     <div class="box"> 
     <div id="content1"> 
      </div> 
      <div id="content2"> 
      </div> 
      <div id="sl"> 
       <ul class="ul" style="z-index:1;"> 
        <li class="li"> 
        <div class="contenttop"> 
          content 
         </div> 
         <div class="contentbottom"> 
          <div class="col1"> 
          <div class="ptcol1"> 
           content1 
           </div>         
           <div class="pcol1"> 
           111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/> 
           </div> 
          </div> 
          <div class="col1"> 
          <div class="ptcol1"> 
           content2 
           </div>         
           <div class="pcol1"> 
           111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/> 
           </div> 
          </div> 
         </div>       
        </li> 
       </ul> 
      </div> 
     </div> 
</div> 
<div id="footerwarp"> 
<div id="footerbottom"> 
    </div>  
</div> 
</body> 
</html>

Quelle

2010-11-28 yuli chika

betrachten möchten Zunächst einmal müssen Sie einen CSS-Reset verwenden. Sie müssen nicht dieselben css-Eigenschaften in jedem verwendeten Element deklarieren. Es ist verrückt, deshalb hast du Kopfschmerzen. Einfach googeln für CSS zurücksetzen und oder Yahoos verwenden: (http://developer.yahoo.com/yui/3/cssreset/). Alles kann getan werden, wenn Sie wissen, wie Sie Ihre Arbeit umschreiben und Workarounds nutzen können, inklusive der Positionierung in IE6. Ich bin der eine, der Ihnen eine Antwort auf Ihr Problem geben wird, nur ein Ratschlag ... – Jonathan

Vielleicht sollten Sie erwähnen, was Sie tatsächlich versuchen zu erreichen? – RoToRa

mögliches Duplikat von [IE 6 vs. position: fixed] (http://stackoverflow.com/questions/1074335/ie-6-vs-positionfixed) – mercator

ich es als meine eigene Lösung nicht behaupten, weil das für die Person wäre unfair, die so viel Mühe geben es zu reparieren, aber ich glaube, dass Sie vielleicht die Website von Stu Nicolls (CSS Play)

Quelle

2010-11-30 14:23:28

Position: behoben - Problem in IE6.

Antwort

Verwandte Themen