Question

以下是代码：

<!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像素空格！

这是safari 5.0.3中的错误（我无法安装任何其他浏览器进行测试）？或者在我的代码中？还是在CSS？有没有一种简单的方法来解决它？

Answer 1

这不仅仅是Safari。 John Resign在他的博客上讨论了子像素宽度：http://ejohn.org/blog/sub-pixel-problems-in-css/

此问题还取决于容器的实际宽度。

SO上也有一个关于此问题的帖子，现在似乎无法找到它。

计算百分比宽度时，safari中是否存在错误？

1 个答案: