safari 计算百分比宽度时是否有错误？
这是代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title></title>
<style type="text/css">
* { margin:0px; padding: 0px;}
#greenbox {
border: 5px solid green;
margin: 20px;
}
#redbox {
background-color: red;
float:left;
width: 50%;
}
#bluebox {
background-color: blue;
width: 50%;
overflow: auto;
}
</style>
</head>
<body>
<div id="greenbox">
<div id="redbox">
red box
</div>
<div id="bluebox">
blue box
</div>
</div>
</body>
该代码将显示一个带边框的绿色框、一个红色框和绿色框内的蓝色框，两者都有背景色。
但问题是：将蓝色框和红色框的宽度分别设置为 50% 理论上应该包含绿色框的全部内容区域。然而，绿色框的最右侧有一个 1 px 的空白！
这是 safari 5.0.3 中的错误吗（我无法安装任何其他浏览器来测试）？或者在我的代码中？或者在 CSS 中？有没有简单的方法可以修复它？
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title></title>
<style type="text/css">
* { margin:0px; padding: 0px;}
#greenbox {
border: 5px solid green;
margin: 20px;
}
#redbox {
background-color: red;
float:left;
width: 50%;
}
#bluebox {
background-color: blue;
width: 50%;
overflow: auto;
}
</style>
</head>
<body>
<div id="greenbox">
<div id="redbox">
red box
</div>
<div id="bluebox">
blue box
</div>
</div>
</body>
The code will display a bordered green box, and a red box and box blue inside the green box, both with background colors.
Here's the problem though: setting the blue box and red box's width to 50% each SHOULD in theory encompass the full content area of the green box. However, there is an empty 1 px whitespace on the right-most side of the green box!
Is this a bug in safari 5.0.3 (I can't install any other browser to test)? Or in my code? Or in the CSS? Is there a simple way to fix it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不仅仅是 Safari。 John Resign 在他的博客上谈论了子像素宽度：http://ejohn.org /blog/sub-pixel-problems-in-css/
这个问题还取决于容器的实际宽度。
SO上也有一个帖子讲过这个，现在好像找不到了。
It's not just Safari. John Resign talks about sub pixel widths on his blog : http://ejohn.org/blog/sub-pixel-problems-in-css/
This question also depends on the actual width of your container.
There was also a thread on SO that talked about this, can't seem to find it just now.