跨瀏覽器CSS邊距和浮點定位

嘗試位置兩個div，左側是200px寬的側邊欄，右側邊框佔據屏幕的其餘部分。我將這段代碼作爲一個在firefox中工作的例子，但是在webkit瀏覽器中，右邊和左邊都有一個奇怪的邊界。在這個示例代碼中，我將容器寬度設置爲600px以便於演示，但實際上我不知道容器div的寬度。我正在使用doctype XHTML 1.0 Transitional。跨瀏覽器CSS邊距和浮點定位

<style type="text/css"> 
#container { 
    height:50px; width:600px; background-color:black; overflow:hidden; 
} 
#sidebar { 
    height:50px; width:100px; background-color:lightgreen; float:left; 
} 
#content { 
    height:50px; margin-left:100px; background-color:lightblue; 
} 
</style> 

<div id="container"> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div>

來源

2011-03-03 tybro0103

它對我來說非常好。我把它扔進了JsFiddle http://jsfiddle.net/chprpipr/9fuDw/我做的唯一的改變是去掉了包含body的10px填充，但我認爲這是JsFiddle可能添加的一種風格。 – chprpipr 2011-03-03 17:57:27

@chprpipr嗯......它看起來不錯......也許這只是我的文檔類型？ – tybro0103 2011-03-03 18:16:14

我在小提琴中將doctype更新爲XHTML 1.0 Transitional，但它看起來還是不錯的。也許比較你的doctype和小提琴，看看是否有語法錯誤？或者你可以將你的代碼複製到小提琴並在那裏複製它？ – chprpipr 2011-03-03 18:21:52

唉唉......以及我在全局CSS有div {overflow:hidden;}。在內容div上設置overflow:visible使其工作。

來源

2011-03-03 19:06:26 tybro0103

  <style type="text/css"> 
#container { 
    height:50px; width:100%; background-color:black; overflow:hidden; float:left; 
} 
#sidebar { 
    height:50px; width:200px; background-color:lightgreen; float:left; 
} 
#content { 
    height:50px; background-color:lightblue; 
} 
</style>

來源

2011-03-03 17:47:12

跨瀏覽器CSS邊距和浮點定位

回答

相關問題