Is there a bug in safari when calculation percentage widths?_问答_开发者

Is there a bug in safari when calculation percentage widths?

开发者 https://www.devze.com 2023-02-19 00:36 出处：网络

Here is the code: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">

相关专题：css width

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>
</开发者_StackOverflow社区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?

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.