Home >Web Front-end >HTML Tutorial >Css Div layout learning (4)? About hack_html/css_WEB-ITnose
Css Div layout learning (4)? About hack_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:32:24984browse
Not every browser can correctly display the set CSS, so is there any way to use some CSS so that every popular browser can display the web page consistently. Haha, there is really such a good thing in the world, which can unify some incompatible situations. This category is called CSS hack. I will briefly introduce a CSS hack below.
In any standards-compliant browser, the total width of an element that contains other elements needs to be calculated in conjunction with the width of those containers as well as their padding and borders. This means that the actual total width of a 300 pixel wide container is: 300 pixels plus padding and border. This is how you calculate the total width of an element.
However, IE5 and IE5.5 are not calculated this way. They will subtract the width of the border and padding from the width to get the true width of the container. That is, a container that is 300 pixels wide does not end up being 300 pixels wide. If padding is set to 10 pixels and border is set to 10 pixels, then the real width of the container is only 300-10-10-10-10, which is 260 pixels. An example is as follows:
#Sidebar{ width:300px; padding:10px; border:15px solid #000; }
For this box model, its total width is border-left padding-left width padding-right border-right, which is equal to 15 10 300 10 15, which is a total of 350 pixels. But for IE5 and IE5.5, the total width is 300 pixels. Fortunately, some geniuses have solved this problem. Let's see how to solve this problem.
#Sidebar{ padding:10px; border:15px solid #000; width:350px; voice-family:""}""; voice-family:inherit; width:300px; } html>body #Sidebar { width:300px; }
This is the box model hack. First, IE5 and IE5.5 will adjust the width accordingly, and then use voice-family. Since it is not a visual CSS property, it will not will affect the final display. However, this rule adds some syntax adjustments, causing IE5 and IE5.5 to mistakenly believe that this statement will override the selector statement.
The following html>body #Sidebar{width:300px;} statement is for some Css2-compatible browsers (such as Opera browser) will not execute these "confusing" statements above, so it must be added at the end A sentence on the surface.