Bogue de rendu de la solution de contournement dans le mode de comportement IE

Question

J'essaie d'obtenir une page HTML/CSS simple à travailler comme un modèle eBay, mais il ne parvient pas à afficher correctement dans IE. Grâce aux choix HTML d'eBay, la liste sera toujours rendue en mode quirks (pas de référence doctype dans l'iframe de la liste). Le problème ne se pose que lorsqu'une fenêtre de navigateur est plus étroite que la liste ne le demande (~ 1000px). J'ai essayé d'utiliser divers hacks CSS pour cela (le modèle de boîte d'IE, double marge, etc), mais je ne peux pas savoir où est le problème, sauf qu'il semble que IE essaie de rendre le contenu de la page à la largeur de la fenêtre, en passant outre les largeurs définies (à en juger par la façon dont les images d'arrière-plan sont coupées bien que leurs balises div aient défini des largeurs min.) De toute façon, le HTML est (j'ai ajouté des points pour casser l'img et pourrait poster).

    <style type="text/css"> 
     img {border:none;} 
     .head {min-width:1000px; width:auto !important; width:1000px; min-height:100px; text-align:center; padding:0; margin:0px auto; padding-top: 172px; background: #d4e1ea url(xxxx) no-repeat center top;} 
     .left {margin-top:20px; padding:0; float:left;} 
     .right {width:200px; margin:0px; margin-top:10px; padding:0; float:right;} 
     .main {margin-left:189px; margin-top:20px; margin-right:10px; min-width:800px; width:auto !important; width:800px;} 
     .frame (width:100%} 
     .foot {width:564px; margin-top:20px;} 
     .title {height:68px; width:563px; background-image:url(xxxx); padding:0; text-align:center; font-size:22px; text-transform:uppercase; font-weight:bold; font-family:Helvetica,Tahoma,Arial,sans-serif;} 
     .mid {min-height:210px; width:563px; background:repeat-x; padding:0; margin-top:15px; margin-bottom:10px; overflow:hidden;} 
     .mid-top {height:34px; background:no-repeat; margin:0; margin-bottom:10px;} 
     .mid-main {margin-left:15px; overflow:hidden;} 
     .mid-main, .mid-main table {font-size:14px;} 
     .foot .mid-main {height:450px; margin:0; margin-left:1px; padding-left:15px; padding-top:5px; clear:both; background:url(xxxx) repeat-x;} 
     .menu, .img {list-style:none; margin:0; padding:0;} 
     .menu li {margin:0 0 10px 0; padding:0;} 
     .menu li a {position:relative; display:block;} 
     .menu li a img {position:absolute; left:0px;} 
     .menu li a:hover img {left:0px;} 
     .img li div {width:200px; height:200px; margin-bottom: 20px;} 
     .search {min-height:56px; padding-top:41px; padding-left:12px; margin-bottom:20px; background:url(xxxx) no-repeat;} 
    </style> 
    <div class="head"> 
     <!-- FLASH OBJECT --> 
    </div> 
    <div class="left"> 
     <div class="search"><form action="xxxx" method="get" name="search"> 
      <input type="name" name="_nkw" id="eb-srch" length="10" value="Search..." /> 
      <input type="submit" value="Search" name="submit" /> 
     </form></div> 
     <ul class="menu" id="ldca-menu"> 
      <li><.a href="xxx"><.img src="xxxx" /></a></li> 
      <li><.a href="xxx"><.img src="xxxx" /></a></li> 
      <li><.a href="xxx"><.img src="xxxx" /></a></li> 
     </ul> 
    </div> 
    <div class="main"> 
     <div class="right"><ul class="img"> 
      <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li> 
      <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li> 
      <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li> 
     </ul></div> 
     <div class="frame"> 
      <div class="title">Thing to Sell</div> 
      <div class="desc mid"> 
       <div class="mid-top"><!-- CSS BG image --> </div> 
       <div class="mid-main">Description....blah..</div> 
      </div> 
      <div class="specs mid"> 
       <div class="mid-top"><!-- CSS BG image --> </div> 
       <div class="mid-main"><!-- more description --></div> 
      </div> 
     </div> 
     <div class="foot"> 
      <ul id="ldft-menu" class="menu"> 
       <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab --> 
       <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab --> 
       <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab --> 
      </ul> 
      <div class="mid-main"> 
       <div id="ldft-1"> 
        <h3>Tab Title</h3> 
        <p>Content</p> 
       </div> 
       <div id="ldft-2"> 
        <h3>Tab Title</h3> 
        <p>Content</p> 
       </div> 
       <div id="ldft-3"> 
        <h3>Tab Title</h3> 
        <p>Content</p> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Essayez d'ajouter

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Dans votre tête Cela forcera conforme aux normes IE rendu

.