跨浏览器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边距和浮点定位

回答

相关问题