How to use the Zoom property or Overflow:auto in CSS

This time to bring you CSS in the use of the zoom attribute or Overflow:auto, the use of CSS in the zoom attribute or Overflow:auto considerations, the following is the actual case, take a look.

Objective

In fact, the CSS in the Zoom this property is generally unknown, and even some CSS manuals can not be queried. In fact, the Zoom property is the exclusive properties of IE browser, Firefox and other browsers do not support. It can set or retrieve the scale of an object. In addition, it has other functions, such as triggering the Haslayout property of IE, clearing floating, clearing the overlap of margin, and so on.

Because the Zoom property is the exclusive property of IE browser, he clears the floating function only for IE browser, and Firefox, Google and other browsers need to use the Overflow:auto property to clear the float. These two properties are required to be compatible with IE6, IE7, IE8, Firefox, and Google Chrome.

When we refactor the page, we often use a large container containing multiple floating small container layout, but if the outside of this large container does not set a fixed height value, then the large container height will not change with the inside of the small container height changes, resulting in content overflow phenomenon, then only need to clear the float will return to normal. So as long as the outside of the large container plus overflow:auto properties, you can solve the IE7 and Firefox browser to clear the floating problem, but IE6 does not take effect, so we also need to use the zoom of this IE private properties to achieve a completely clear floating compatibility effect.

Instance Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Summary of common color gradient methods

Simulation of the Ferris wheel rotation animation effect

CSS3 's Box-sizing Property graphic tutorial