Problems encountered in CSS practice

WebKit in Browser zoom below 100% floating layout disorder?

Example: 1200 Width: Content width (400-20-2) * 3 + padding width 0 + border width 1px*2 edge + margin width 10px*2 edge

<div class= "Div1" ><div class= "Div2" ><li class= "li" ></li><li class= "Li" ></li> <li class= "Li3" ></li></div></div>

. Div2{width:1200px;Border:1px solid #ddd;}. Li{float: Left;width:378px;Height:40px;Line-height:40px;margin:10px;Border:1px solid #ddd;}. Li3{float: Right;width:31%;Height:40px;Line-height:40px;margin:10px;Border:1px solid #ddd;}

The problem: In the-webket kernel, there is no such situation in IE, because the width of the border is 1px in the zoom, the third float will be squeezed to the next level when it shrinks below 100%.

Workaround: As the above code, to the third box to set a percentage, the percentage can be the value of 378/1200=31.5% test value of 31% can be!

Problems encountered in CSS practice