(1) The difference between IE and Firefox is: Border: 2px solid # f00; * border: 1px solid # f00;
(2) The difference between ie6.0, ie7.0, and Firefox is: Border: 1px solid # f00! Important; Border: 2px solid # f00;
In (1), the reason why * is put behind it is because FF is not recognized * and thus it is set to border only once. After the IE series has set border twice, the last attribute overwrites the previous one, so it is a pixel border.
In (2), the reason why! Important is set in the first border because it increases the priority of this border. Even if it is set at one or even n times later, ie6.0 does not accept this rule, as a result, it applies the second border setting, that is, it overwrites this principle for the first time, not it does not recognize it! Important; so its borderA red box of 2 pixels.
This is a simple application:
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/CSS">
Div {
Width: 800px;
Height: 250px;
Background-color: yellow! Important;
Background-color: red;
Border: 3px solid #000! Important;
* Border: 5px solid # f00! Important;
Border: 1px solid #000;
}
</Style>
</Head>
Example 1:
CSS
# Box {
Html
< Div ID = "Box" > In different browsers, the color of this line should be different! </ Div >
This example should be the use of important that we often see. In the IE environment, the line is blue, and in Firefox, It is red. I will not talk about it any more. Let's look at the next example.
Example 2:
CSS
Html
< Div ID = "Box" >
Example 2: CSSCodeThe first line sets the font color of all the divs in the box to red, and the second and third lines use class to redefine the font color of their Div to blue. The difference is that, important is used at the end of the second line, and important is used in the third line!
By default, the priority of the class is smaller than the ID. Therefore, the second row uses the class to redefine its own style, and the style does not take effect. Therefore, the row inherits the parent attribute, and the character is still red!
However, in the third row, important is used to increase the priority (or as forced redefinition), so the CSS here takes effect and the line is changed to Blue!
From this example, we can prove that,IE does not support important!
So why do many people say that IE doesn't know it? I think we may not have encountered any situations in actual practice:What do you do when you want to increase the class priority?
That is to say, You may ignore this function. You only know that in the CSS code block named the same element, use it to increase the priority of the Code with the sorting order relative to the top (Example 1 )!
The above two examples can be summarized as follows:
For a good (or standard) browser, impant ant not only improves the code priority in order, but also improves the class priority (such as Firefox ), however, according to IE's lack of support for the former, this is only a major bug in IE, and cannot be said to be "not recognized or supported "!
However, in any case, this major bug of IE has helped us solve many compatibility problems, which is obviously not a bad thing!
in IE, the box-model interpretation has bugs, in versions earlier than ie6.0, the Border Value and fill value of an element are included in the width (instead of the width value ). For example, you may use the following CSS to specify the size of a container:
# Box
{< br> width: 100px;
border: 5px;
padding: 20px;
}< br> apply the following content in HTML: the total width of the box is 150 pixels in almost all browsers (100 pixel width + two 5 pixel borders + two 20 pixels fill ), the browser version earlier than IE6 is still 100 pixels (the Border Value and fill value are included in the width value). the hack of the box model can solve this problem,
# Box
{< br> width: 150px; // This is the incorrect width. all browsers read
voice-family :\}\; // ie5.x/win ignores the content after \}\
voice-family: Inherit;
width: 100px; // Some browsers including IE6/win read the new value (300px) overwrite the old
}< WBR>
. A simpler method is as follows:
CSS:
# box {width: 150px ;}< BR ># box Div {border: 5px; padding: 20px ;}< br> HTML:
...
In this way, the total width of the box in any browser will be 150 pixels.
However, even the latest ie6.0 still has the float-model problem. Fortunately (or sadly ?) We can use IE, which is never supported! Important to solve this problem.
! Important is a syntax defined in css1 to improve the application priority of a specified style rule (see the w3.org interpretation ). Syntax format {srule! Important} is written at the end of the definition, for example: box {color: red! Important ;}
Suppose we define a style like this:
# Box {background-color: # ffffff! Important; Background-color: #000000 ;}
It can be understood in browsers that support this syntax, such as Firefox and opera! Indicates the priority of important. The background color is # ffffff, while the background color is #000000 in IE.
! The important attribute is actually in the CSS specification. As a result, IE6 scheme is not supported, and many cssers find a solution because it is not supported. In general, if two identical attributes are written in the same CSS block, they are actually executed according to the following code:
. Home {
Margin-left: 20px;
Margin-left: 40px;
}
The execution is actually based on 40 PX ,! Important is used to set the priority of the executed statement. If you change the preceding statement:
. Home {
Margin-left: 20px! Important;
Margin-left: 40px;
}
In Firefox, Google, and IE7 and later versions, the code will be executed at 20 PX, while in IE6, the code will still be executed at 40 PX, because IE6 does not support it! According to the impant ant specification, we can follow this rule to meet the design requirements of IE6. When we find that IE6 is different from other browsers, we should set two items and add one in the above! Important flag, and the following sentence does not need to be added, so IE6 will be executed according to the following. Senior csser said: Today's CSS everywhere! Important. This is a disaster caused by tiankkill IE6. We all say that IE6 is a metabolic product.
CSS definition has always been confusing with compatibility issues of different browsers. Whether using Div + CSS or table for page design, my understanding of Web reconstruction is speed and compatibility. That is to say, we should try our best to improve the browsing speed when visitors access the page, and make the page as compatible with the browsing Effects of Different visiting browsers as much as possible. So the recent design is to open several different browsers for testing, such as IE, gosurf browser, opera, and Firefox browsers. Test results show that IE and gosurf browser have the best CSS support, followed by opera, and Firefox has the highest requirements.
Let's take a look at the following results:
The effect shown in IE, gosurf browser, and Opera browser is as follows:
In the Mozilla Firefox browser, the following results are displayed:
Among them, the effect of IE and gosurf browser browsing is basically no difference, the center is normal; in Opera browser, the center effect is normal (but there are some problems with other aspects of the page, this will be further studied later); the effects of the Mozilla Firefox browser are different. The center is right, but the two sides are not aligned, and the captured image is carefully checked, the two sides have an extra width of five pixels, and there is a problem with the indentation in them.
First, let's look at the definition of the intermediate area in CSS:
| # Mainall { Width: 760px; Height: 300px; Padding: 5px; margin: 0 auto; Background: # FFF; } |
It may be padding: 5px. Firefox does not support this indentation. First, change "padding: 5px;" to "padding: 0px;", save the settings, and browse, if the two sides have 5 more pixels, the width will disappear. It is. Add "padding: 0px!" In css! Important ;":
| # Mainall { Width: 760px; Height: 300px; Padding: 0px! Important; Padding: 5px; margin: 0 auto; Background: # FFF; } |
! Important is used to improve the application priority of a specified style rule, but the value not supported by IE is ignored even if IE is defined in CSS and is executed and displayed according to the subsequent definition, while opera and Firefox will press! The rules specified by important are displayed first. View the browsing effect:
First, the problem of two-side alignment is solved. However, the content of the DIV on the right is squeezed below. It is probably because the width is not enough. Let's look at the definitions of the two divs:
| /* = Left-side definition start = */ # Mainbox { Padding: 10px; float: left; Width: 495px; Background: # FFF; } /* = Start of the definition on the right of the central region = */ # Rightbox { Float: right; Padding: 5px; Width: 250px, height: 100%; Background: # f6f7f9; } |
It should be the fox (Firefox) That indents the padding of the padding patch, not only with indent effect, but also let the browser parse it into: the width of the entire box is width + padding! Dizzy. Find the cause and make it easier to solve it: Calculate the width of the entire box in Firefox as (width-padding ). Let! Important:
| /* = Left-side definition start = */ # Mainbox { Padding: 0px! Important;/***** compatible with the Firefox browser *****/ Padding: 10px; float: left; Width: 495px; Background: # FFF; } /* = Start of the definition on the right of the central region = */ # Rightbox { Float: right; Padding: 5px; Width: 250px, height: 100%; Background: # f6f7f9; } |
Again, I finally went up on the left. Haha, this is the problem. But the problem arises again. How does the gray title bar on the right go out of the boundary?
Let's look at the CSS definition:
| # Rightbox dt { Padding: 3px! Important;/***** compatible with the Firefox browser *****/ Padding: 3px; margin: 0px; Border: 0px; Width: 100%; Font-weight: normal; font-family:; font-size: 12px; color: # FFF; Background: # a6a9ae; text-align: left; } # Rightbox dd { Padding: 5px! Important;/***** compatible with the Firefox browser *****/ Padding: 10px; margin: 0px; Border: 0px; Text-align: left; Width: 100%; Font-weight: normal; font-family:; font-size: 12px; line-Height: 24px; } |
The title # rightbox dt is set to 100% in width. After testing, the definition is removed and displayed as normal. In the same way, add the definition "width :! Important; ", let Firefox first understand this definition and discard the definition of width: 100%:
| # Rightbox dt { Padding: 3px! Important;/***** compatible with the Firefox browser *****/ Padding: 3px; margin: 0px; Border: 0px; Width :! Important;/***** compatible with the Firefox browser *****/ Width: 100%; Font-weight: normal; font-family:; font-size: 12px; color: # FFF; Background: # a6a9ae; text-align: left; } # Rightbox dd { Padding: 5px! Important;/***** compatible with the Firefox browser *****/ Padding: 10px; margin: 0px; Border: 0px; Text-align: left; Width :! Important;/***** compatible with the Firefox browser *****/ Width: 100%; Font-weight: normal; font-family:; font-size: 12px; line-Height: 24px; } |
The browsing effect is normal!
Adjust the effect with width :! Effects after important
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
