Summary
I went to 178.com yesterday to take a written test. I only had one question for CSS. I wanted to write CSS. I had to show different results in IE6, IE7, and FF browsers, I didn't expect it to be a multiple-choice question, and I used a sub-selector. This syntax is seldom seen, so I didn't pay much attention to it at ordinary times. I didn't expect it to happen at this time. Well, now, back to the Internet, simply review all the css hack methods and try to fight all over the world ~~
Body
First, let's look at the question requirements.
Html code:
<Body>
<Div> <span> Text </span> </div>
</Body>
Write CSS code to display different effects in IE6, IE7, and FF respectively:
Briefly describe that IE6 is underlined below, IE7 is in the middle, and FF is in the top. Because IE6 has the worst compatibility, its priority is naturally low. Moreover, its hack method uses underscores (_), IE7 is relatively satisfactory, and FF is the most standard, now you can remember which browser corresponds to each graph :)
OK. Let's start our hack journey.
Method 1:
Div {
Text-decoration: overline;
* Text-decoration: line-through;
_ Text-decoration: underline;
}
Simply put, we use the following points:
1. The syntax for parsing CSS varies by Browser
2. CSS syntax rules: the following attributes overwrite the previous ones.
Here we only use _ (this is easy to remember, exclusive to IE6) and * (for IE6 and IE7). Next we will use it! Important syntax.
Method 2:
! The impant ant syntax is for the syntax "the following attributes overwrite the previous attributes", that is, the identifier! Important attributes are not covered by the same attributes that follow, and IE6 does not know this, which makes it easy for other browsers to "bully" IE6 based on this:
Div {
Text-decoration: overline;
* Text-decoration: line-through! Important;
* Text-decoration: underline;
}
Principle:
1. FF does not know *, but IE6/IE7 does.
2. I don't know IE6! Imprtant, but IE7 knows
Note: The order cannot be changed. If it is changed to the following:
Text-decoration: overline;
* Text-decoration: underline;
* Text-decoration: line-through! Important;
Both IE6 and IE7 are the same.
----------------------------------------------
Check the Internet. IE6 is supported! Important attribute (this attribute is CSS1 syntax and supports IE4 +). The preceding syntax is only a bug in IE6 (in the same {}, the same attribute obtains the latter ), to support IE6, the general method is to split CSS, for example:
Div {-----------------------------------------------
Method 3:
First look at a table
To facilitate memory, a "target object" column is added to the preceding hack table (whether there are spaces next to * can be understood as separators at the same time ), what needs to be added is the exclusive method of IE7: * + html div
Here we will use the exclusive methods of IE6 and IE7:
Div {
Text-decoration: overline;
}
* + Html div {
Text-decoration: line-through;
}
* Html div {
Text-decoration: underline;
}
Method 4:
Div {
Text-decoration: overline;
}
Html * div {
Text-decoration: line-through! Important;
Text-decoration: underline;
}
Principle: Internet Explorer 6/Internet Explorer 7 + Internet Explorer 6! Important
Method 5:
Body> div {
Text-decoration: overline;
* Text-decoration: line-through;
}
Div {
Text-decoration: underline;
}
Principle: IE6 does not understand> This selector + hack for Attributes
Tail
Looking back, we can find that the principle is described in the first method, and what you should remember is the table in the third method.
Some people may say that they can also use the annotation syntax unique to IE, but I personally have code cleanliness. In addition, this method is only applicable to HTML code, while in web standards, CSS code is used to writing files separately (to facilitate the introduction of multiple webpage files), so this method is skipped. What else is/**/or @ important? I don't want to study it for the moment. It seems dizzy. Even if I write it myself, I may not even understand it in the future, let alone other maintenance personnel. Therefore, the method described in this article is sufficient if it can solve the problem. It is not necessary to force yourself to become a technical madman, study some abnormal problems such as "I ++ 2 :)
Finally, I was a little hasty. If you have any mistakes, I hope you can correct them. Thank you.
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
