HTML border problems with float when zoom out

问题:

I have a div container, which is 800px width, that is separated into two by a single border(1px). div A (399px) is floated left while div B(400px) is float right. The problem is when i'm zooming out, the right border, which is div B, is being move wherein it place it at the bottom of the page. To fix it, I set the two div's width to percentage at 50% each -- I removed the border. Now when I add the border at the center (by setting border-right of div A), and also adjusting div A to 49.8%, it again places div B at the bottom when zooming out. Am I doing something wrong? The problem is that the border is set to 1px I guess. How to fix this? I need the 1px size of the border.

回答1:

This problem occurs because the browser is reducing the size of the divs proportionally, but does not apply reducing to the border.

To resolve this try using this css:

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;

The size of the div will be measured with the border and reduced properly when zooming out and you can leave both divs with the width of 400px.

The full code should look simillar to this:

div#container{
    width: 800px;
}
div#container > div{
    width: 400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

div#left{
    float: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
}
div#right{
    float: right;

}

回答2:

You could do it like this: http://jsfiddle.net/SNZEK/

If you put one div within another div and add the border size to the parent div. That should work in FF, Chrome and >=IE7

.parent-div { 
    float: left;
    width: 50px;
}
.child-div {  
    width: 48px;
    border: 1px solid black;
}

回答3:

Try the following css see if it solve your problem. I have tried it in on IE8 and Chrome and they both work fine. I had setup my test example at jsfiddle.

div#container{
    width: 800px;
}
div#left{
    float: left;
    width: 398px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
}
div#right{
    float: right;
    width: 400px;
}