解決方法在IE瀏覽器的怪癖模式渲染錯誤

Question

我試圖讓一個簡單的HTML/CSS頁面作爲易趣模板工作，但它無法在IE中正確渲染。感謝eBay的HTML選擇，列表將始終以怪癖模式呈現（列表的iframe中沒有文檔類型引用）。只有當瀏覽器窗口比列表要求（〜1000px）更窄時纔會出現問題。我已經嘗試過使用各種CSS黑客（IE的框模型，雙邊距等），但我無法弄清楚問題出在哪裏，除了IE似乎試圖渲染頁面內容到寬度（重新定義寬度）（通過背景圖片縮短的方式來判斷，即使他們的div標籤已經定義了最小寬度）。無論如何，HTML是（我添加了點來打破img和一個標籤，以便這個可以發佈）：

    <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

嘗試增加

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

在你的頭這將迫使IE符合標準的渲染

。