Firefox and IE generic three-site refactoring practical Skills-css Tutorial
Use zoom, overflow to resolve floating problems for nested containers under IE6, IE7, FF
we often come across a container. A border is set, and the height of the border varies with the container height, but when the container is set to a floating property, the bounding box does not follow the change, and the float needs to be cleared. To the outer border container with the Overflow:auto properties, you can solve the IE7 and FF cleanup floating problem, but IE6 does not work, we need to use IE a private property zoom so that the IE5.5 browser to achieve the effect of changes in the bounding box.
A few details to focus on, such as we build a text-style container, 200 pixels wide, highly adaptive, outside the package of a style of content of 10 pixels outside the box. (Figure 1)
Figure 1
The code is as follows:
| <style type= "Text/css" > . content{border:10px solid #F00;} . text{width:200px; height:300px background: #000;} </style> <body bgcolor= "#FFFFFF" > <div class= "Content" > <div class= "Text" ></div> </div> </body> |
If we set a left-floating property for the text container and define the content container to be 200 pixels wide, we need to add the Overflow:auto property to the content container to clear the text container of the float. Otherwise, the problem will occur under FF. (Figure 2)
Figure 2
The code is as follows:
| <style type= "Text/css" > . content{border:10px solid #F00; width:200px; overflow:auto;} . text{width:200px; height:300px background: #000; float:left;} </style> <body bgcolor= "#FFFFFF" > <div class= "Content" > <div class= "Text" ></div> </div> </body> |
In addition, there is a more extraordinary situation, if you do not set the content width of the case, only the use of Overflow:auto, under the IE5.5 can not achieve the effect of clearing floating. Therefore, we need to use an IE private property zoom to make IE achieve the desired effect.
The code is as follows:
| <style type= "Text/css" > . content{border:10px solid #F00; overflow:auto; zoom:1;} . text{width:200px; height:300px background: #000; float:left;} </style> <body bgcolor= "#FFFFFF" > <div class= "Content" > <div class= "Text" ></div> </div> </body> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
