When ie7.0 came out, there were new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted. To solve the problem of ie7.0 compatibility, I found the following article:
Reference content
I use most of them now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly explained, and the page will not be displayed as required! After searching, I found a good hack Method for IE7 and used "* + html". Now I can use IE7 to browse it. It should be okay.
You can write a CSS file as follows:
# Example {color: #333;}/* Moz */
* Html # example {color: #666;}/* IE6 */
* + Html # example {color: #999;}/* IE7 */
The font color in Firefox is #333, the font color in IE6 is #666, And the font color in IE7 is #999. I really hope that the spam IE6 will retire soon ....
CSS hacks and CSS style sheet patches. used to modify the webpage template layout designed for XHTML encoding. For some layer overflow problems, hacks Source: [url] www.webjavasut.net [/url]. This CSS patch (Hacks) is very simple, in the style sheet, set an element for IE7 separately. The ID or class is written before:
*: First-Child + html # ID {}
Or
*: First-Child + HTML. Class {}
Don't forget the previous *. This hacks makes the DIV + CSS webpage template perfectly reflect the original layout in ie5 +, IE6, IE7, Firefox 1.5, and Firefox 2 browsers, no issues such as layer overflow.
IE7 has fixed many bugs and added support for some separators, therefore, hack for IE hiding or display, such as * HTML {} and HTML> body {}, will expire in IE7. Although CSS hack is not recommended, it is a foolproof filter, but it can only appear in HTML, and CSS hack is useful. Nanobot found some CSS hack for IE7, specifically:
> Body
HTML *
* + Html
The first two are invalid CSS statements, which are ignored in standard compatible browsers, but not in IE7. For> body, it will replace the missing selector with the global selector *, that is, it will be processed as *> body, and not only for> selector, + ,~ This phenomenon also exists in the selector. For HTML *, because there is no space between HTML and *, it is also a CSS syntax error, but IE7 does not ignore it, but mistakenly considers there is a space here. For the third type of * + HTML, IE7 considers that the DTD declaration before HTML is also an element, so HTML will be selected. Among the three methods, only this method is legal CSS writing, that is to say, it can be verified by the validator, so it is also the hack usage recommended by the author.
Finally, the author provides the best method:
IE 6 and below
Use * HTML {} to select the HTML element.
IE 7 and below
Use * + HTML, * HTML {} to select the HTML element.
IE 7 only
Use * + HTML {} to select the HTML element.
IE 7 and modern browsers only
Use HTML> body {} to select the body element.
Modern browsers only (not IE 7)
Use HTML>/**/body {} to select the body element.
The IE7 CSS hack (! Important hack method in ie7.0)
Due to IE pair! Important identifies bugs. Currently, most web standard designers use this bug to be compatible with IE and ff. However, ie7.0 fixes this bug and the problem arises again, how can I be compatible with both ie.7.0 and ie6.0 and FF? As the saying goes, "there are policies and countermeasures", foreign webpage standard designers are compatible with ie7.0, ie6.0, and FF by using CSS Filter (not CSS hack, the following is the translation of the author from a foreign website.
Create a CSS style as follows:
Insert code:
# Item {
Width: 200px;
Height: 200px;
Background: red;
}
Create a new Div and use the CSS style defined above:
Insert code:
<Div id = "item"> some text here </div>
Add the lang attribute in the body representation. The Chinese character is Zh:
Insert code:
<Body lang = "en">
Now define another style for the DIV element:
Insert code:
[/Code]
*: Lang (en) # item {
Background: Green! Important;
}
[/Code]
This is intended for use! Important overwrites the original CSS style. Because the Lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence, so it achieves the same effect in ie6.0, unfortunately, Safari does not support this attribute, so you need to add the following CSS style:
Insert code:
# Item: Empty {
Background: Green! Important
}
: The empty selector is a css3 specification. Although safari does not support this specification, this element is still selected, whether or not this element exists, now green will now be available in browsers other than IE, and pass the test in the following browsers and operating systems:
IE7 beta 2 preview/win
Ie5.01 +/win
Firefox 1.5/win
Opera 8.5/win & Linux
Netscape 7.01, 8/win
Mozilla 1.7.12/win & Linux
Safari 2/Mac
Firefox 1.0.4/Linux
Epiphany 1.4.8/Linux
Galeon 1.3.20/Linux
Screenshot of the IE7 CSS hack in IE7
Screenshot of the IE7 CSS hack in Firefox 1.5
According to the author, this is actually not a kind of hack, it should belong to the filter, but it does not seem to be the most important, because through this method, we once again solve ie6.0, the compatibility between ie7.0 and other browsers, and The Lang-filter method will be useful in the future.
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
