IE6（及更早版本）中的Nowrap繼承錯誤

我有一些任務可以製作一個輪播，它可以保留多個未定義寬度的元素。所以，最簡單的方法 - 通過CSS製作所有元素，然後執行所有JS計算等等。在（錯誤製作者）IE6中測試它之前，一切都很順利。IE6（及更早版本）中的Nowrap繼承錯誤

這裏什麼是瀏覽器會在樣品上：

Safari瀏覽器（5.1.2），火狐（10.0.2），戲曲（11.62） Safari 5.1.2

的Internet Explorer（9.1） Internet Explorer 9.1

的Internet Explorer（6）（跨度凹凸李箱文本） Text in span bump li box — Internet Explorer 6

DebugBar約李，它忽略了預設的規則白色空間：正常 - Internet Explorer 6中 DebugBar about LI — Internet Explorer 6

DebugBar約SPAN，它忽視了繼承預設的規則白色空間：正常 - Internet Explorer 6中 DebugBar about SPAN — Internet Explorer 6

HTML的

這裏樣本：

<div class="carousel"> 
    <div class="box"> 
    <ul> 
     <li> 
     <span>Some text</span> 
     </li> 
     <li> 
     <span>Some longer text</span> 
     </li> 
     <li> 
     … 
     </li> 
    </ul> 
    </div> 
</div>

這裏CSS的一部分進行管理：

div.carousel { 
    width: 700px; height:200px; 
    } 
    div.carousel div.box { 
    width: 100%; height: 100%; 
    overflow: hidden; 
    } 
    div.carousel div.box ul { 
     display: block; 
     white-space: nowrap; /* to make all inside elements lay in row */ 
     } 
     div.carousel div.box ul li { 
     margin-left: 23px; 
     width: 130px; height: 150px; 
     display: inline-block; 
     vertical-align: bottom; 
     white-space: normal; 
     }

盒修正IE6及更早版本：

div.carousel div.box ul li { 
    display: inline; 
    zoom: 1; 
    }

中的jsfiddle

Live example

來源

2012-05-20 Maxja

歡迎來到IE6的美好世界。（但是，嚴重的是，你並不真的擔心版本比這個更舊，你呢？） – Spudley

當然不是，IE6是我的可能性的結束 – Maxja

看到這個網址：http://cos.livejournal.com/36490.html

答案，現在看來，這我們的老最喜歡的，Quirks模式。在怪癖模式下，IE不識別white-space:normal風格，但確實承認其他white-space風格，因此您的級聯問題。

解決方案是阻止IE進入怪癖模式。這與在頁面的開頭添加有效的Doctype一樣簡單。

怪癖模式可能會將其他佈局故障也引入到您的頁面，所以這一修復應該可以解決您可能遇到的其他問題。

來源

2012-05-20 18:39:27 Spudley

IE6（及更早版本）中的Nowrap繼承錯誤

回答

相關問題