我似乎無法讓我的CSS在IE中正常工作(我正在使用IE 8),並且我希望有人能夠就此分享一些意見。如何使用以下HTML代碼實現雙列布局?
這裏是我的向上兼容HTML代碼: -
<div id="column-content">
<div id="content">
<p>This is some text</p>
<div class="toc">Right content</div>
</div>
</div>
我想是有div#column-content
將被顯示在左側和嵌套div.toc
要在右側div#column-content
容器外部顯示。把它看作是一個雙列布局,但唯一的問題是我不能徹底改變這個HTML代碼來模仿我在網站中找到的一些更簡單的佈局。所以,對我來說,唯一的解決方案就是把CSS弄得像我想要的一樣。
這就是我對我的CSS: -
#column-content {
width: 50%;
float: right;
}
#content {
margin: 0 15em 0 0;
position: relative;
border: 1px solid #ccc;
background-color:yellow;
}
div.toc {
margin:-3.3em -14em 0 0;
width:200px;
float:right;
border: 1px solid #ccc;
background-color:pink;
}
我得到我想要在Firefox的影響,所有的壁虎瀏覽器。如果你在Firefox中查看它,你可以看到黃色框和粉紅色框之間清晰的分隔。當我在IE中查看它時,這些框似乎彼此粘在一起,我似乎無法實現框之間的差距。
這可能使這項工作在所有瀏覽器?爲了更清楚地瞭解HTML,div.toc
始終位於div#content
容器內。我可以在div#content
之內添加更多HTML標籤,並調整CSS以使兩列布局工作。
非常感謝。
僅供參考 - 我沒有看到在IE8的bug,而是IE7。你確定你沒有看到在IE7模式下的IE8渲染? – ScottS 2010-07-13 15:37:25