Prevent Div from being squeezed to the next level when the page is zoomed in Firefox

http://wu110cheng.blog.163.com/blog/static/13334965420121120102439190/

Prevent Div from being squeezed to the next level when the page is zoomed in Firefox

question: three div, one div contains two floating div with border border, and the style design guarantees two The sum of the total width of the div equals the width of the outer div . Zooming in and out of Firefox will cause the right div to be squeezed to the next line when the scale is less than 100%.

Case:

<style>

*{margin:0; padding:0;}

#box {width:300px; height:200px; margin:0 Auto;}

#a {width:148px; height:198px; background: #999; border: #F00 solid 1px; float:left;}

#b {width:148px; height:198px; background: #999; border: #F00 solid 1px; float:left;}

</style>

<div id= "box" >

<div id= "a" ></div>

<div id= "B" ></div>

</div>

The same problem occurs in Firefox and IE8 , andThe problem does not occur underIE7 .

cause : inFirefox and IE8 , the border of the container when the scale page display scale is less than 100% The scale processing of the property is not maintained equal proportions . So the final total width of the two Div is still greater than the outer width and automatically overflows to the next line.

Workaround :

A: Compromise, set the width of the outer div slightly larger, or leave more space between the inner two div (without using marging or paddding padding).
B: Add the middle layer between the inner and outer containers, see below

Resolve case B:

<style>

*{margin:0; padding:0;}

#box {width:300px; height:200px; margin:0 Auto;}

#a {width:150px; height:200px; float:left;}

#a1 {width:148px; height:198px; background: #999; border: #F00 solid 1px;}

#b {width:150px; height:200px; float:left;}

#b1 {width:148px; height:198px; background: #999; border: #F00 solid 1px;}

</style>

<div id= "box" >

<div id= "A" ><div id= "A1" ></div></div>

<div id= "B" ><div id= "B1" ></div></div>

</div>

Other similar scaling issues are the same.

By visual inspection, Web standards that involve page scaling are not currently available in the market, so most web pages that involve that content have this bug

Prevent Div from being squeezed to the next level when the page is zoomed in Firefox