這個CSS設計的哪個部分正在滴答IE呢？

聲明：我已經在我自己的腦海中無數次地探討過這個問題，但是我懷疑我只是錯過了一些明顯的東西。這個CSS設計的哪個部分正在滴答IE呢？

我一直在試圖用CSS實現一個雙列布局，其中左列是導航（不要對我持有垂直導航），右列是內容。內容的長度各不相同，但總是比右列導航長。我的目標是至少在< = IE7中正常降級，如果我可以幫助它，則不需要JavaScript。

我看到有other questions，其目的是有點類似的事情，這就是我如何找到this article。

在嘗試應用我的設計之後，我想出了一些我認爲可行的方法。

的jsfiddle這裏：http://jsfiddle.net/FVsSV/2/

相關HTML：

<div id="mainCont"> 
    <div id="sidebar"> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit ag</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
    </div> 
    <div id="content"> 
     <div id="padding-wrapper"> 
      <h1>uris et lorem gravida condiment</h1> 

      <h3 id="toc">apibus sit am</h3> 
       Content content content... 
     </div> 
    </div> 
    </div>

相關CSS：

#mainCont { 
    background-color: #000; 
    overflow: hidden; 
    padding-left: 148px; /* The width of the rail */ 
    height:1%; /* So IE plays nice */ 
} 



#sidebar { 
    display: inline; 
    background-color: #9BBCE4; 
    width: 148px; 
    float: left; 
    margin-left: -148px; 
} 


#sidebar a { 
    display: block; 
    padding: 15px 0px; 
    font-size: 1.1em; 
    text-align: center; 
    color: #2C2C2C; 
    text-decoration: none 
} 

#sidebar a:hover { 
    background-color: #4e88ce; 
    color: #FFFFFF; 
} 

#content{ 
    background-color: #FFFFFF; 
    width:100%; 
    border-left: 148px solid #9BBCE4; 
    margin-left:-148px; 
} 

#padding-wrapper { 
    padding: 30px 30px; 
} 

/* content formatting*/ 
#content h1 { 
    font-size: 1.5em; 
    margin: 15px 0px 20px 0px; 
} 

/* content formatting END*/

它看起來就好在FF8和IE8，但是當我檢查它在IE 7和「兼容性視圖」，它看起來相當混亂，我不知道是什麼原因或是否可以輕鬆修復。

這是顯而易見的，我很想念，或者這種方法不值得嘗試IE6-7兼容性？

來源

2011-12-22 RedRiderX

不要結合「內聯」和「浮動」。只需使用「float」 – 2011-12-22 20:17:37

@Diodeus：'display：inline' style是解決[IE6的浮動元素的雙重保證金錯誤]（http://www.positioniseverything.net/explorer/doubled-margin。HTML）。其他瀏覽器將安全地忽略該聲明並將該元素轉換爲塊。 – BoltClock 2011-12-22 20:22:52

我相信這與IE7如何處理特定寬度和負邊距有關。如果我錯了，請糾正我的錯誤，但IE7不會遇到與IE6相同的盒模型問題，但它仍然沒有完全正確。（也許它是不是有相同的盒型號問題，這是它的表現形式嗎？）當你在容器上設置填充（與padding-left:148px一樣）時，IE7不正確增加即相對寬度子對象。然後，當您使用width:100%設置子對象時，您最終會得到一個太寬的孩子，無法放入父母提供的空間。

隨着sidebar首先出現在HTML中並浮動，content應該在其周圍流動，但由於IE7認爲它對容器來說太寬，所以它強制它在浮動對象之後的第一行。 @Scott是正確的 - 如果您從content div的CSS規則中刪除width:100%，它將在IE7中正確流動。（雖然我無法親自在IE6中對此進行驗證。）

當然，我們應該從中學到的東西（超出與IE一起工作的頭痛之處）是負邊距會導致一些奇怪的行爲，應該可能是在大多數情況下避免。儘管如此，對於兩列布局以較短列的背景與較長列的高度相匹配的方法很吸引人。

來源

2011-12-22 21:10:31 TLS

感謝TLS和@scott的正確答案。我主要關注的是父元素可能有什麼問題，但對'content'元素沒有太多想法。還要感謝TLS解釋IE這個神祕的世界。我真的不能讚揚設計中的任何巧妙之處，因爲大部分來自[偉大的文章]（http://www.alistapart.com/articles/multicolumnlayouts/），我在一個列表中找到了。 – RedRiderX 2011-12-23 14:36:04

我認爲你可以在#content上刪除width: 100%，它在IE7（和其他瀏覽器）中可以正常工作。

來源

2011-12-22 20:19:29 ScottS

有趣。你能解釋爲什麼這個（神奇地）起作用嗎？ – ptriek 2011-12-22 20:22:40

@ ptriek - 不是真的，儘管TLS給出了可能的解釋。很多時候，我並不總是試圖找出瀏覽器錯誤的「原因」（因爲瀏覽器渲染行爲常常是爲什麼），我只是「試驗」來找出有效的方法。 – ScottS 2011-12-23 14:46:44

這個CSS設計的哪個部分正在滴答IE呢？

回答

相關問題