IE9渲染問題 - 空白條（水平線）

我有非常簡單的HTML如下所示。在Firefox和Chrome中，它工作正常..它在IE8中也可以正常工作。但是，當我升級到IE9時，它在灰色邊框內顯示了一條白線。我們需要做些什麼來使其與Chrome/Firefox類似。IE9渲染問題 - 空白條（水平線）

注意：縮小70％-85％範圍內的縮放時會發生此問題。

更新後的基準

White-space lines in Internet Explorer caused by elements that have layout

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

    <style type="text/css"> 
     .TransactionHistoryborderForTitle { 
      border: 3px solid #9B9B9B; 
      clear: left; 
      width: 976px; 
      margin: 0px 0 0px 10px; 
     } 
    </style> 

</head> 
<body> 
    <div id="body"> 
     <div class="pageContent"> 
      <div class="rightPart"> 
       <div class="TransactionHistoryborderForTitle"> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

截圖

enter image description here

來源

2013-12-10 Lijo

在IE9中對我來說工作得很好。你可以檢查（F12開發人員工具），如果compat視圖是打開的？ – Abhitalks

@abhitalks。請減小70％-85％範圍內的變焦，然後參閱。 – Lijo

添加一個'display：table-cell;'似乎擺脫了這個問題。與IE的hasLayout問題有關。 – Abhitalks

這個問題似乎有些事情要與IE的古老hasLayout的問題。

事實上，如果你改變了這個標記：

<div class="TransactionHistoryborderForTitle"> 
</div>

要：

<div class="TransactionHistoryborderForTitle" />

然後，你可以清楚地看到這個問題，甚至沒有放大。

通常情況下，通過添加zoom: 1;可以很容易地解決這個問題。但在這種情況下，即使這樣也行不通。

可能的解決方法可能是適用於：

display: table-cell;

這將導致div表現得像一個td，因此像表格單元格的佈局。我真的不知道這是如何工作的，但也許它允許白色空間的崩潰。

本文討論了同一個問題：http://www.table2css.com/articles/white-space-lines-internet-explorer-caused-elements-have-layout

（注：上面的鏈接是不是現在的工作）

這另一篇文章解釋了hasLayout的概況，也該屬性可以觸發的hasLayout：

http://www.satzansatz.de/cssd/onhavinglayout.html

希望有所幫助。

來源

2013-12-10 13:53:03 Abhitalks

IE9渲染問題 - 空白條（水平線）

回答

相關問題