First, explain the title attribute:
- Instance Description: The instance code that can be run and can be seen immediately appears in the article.
- In line with Chinese characteristics: the most popular browsers used by Chinese netizens are IE and Firefox. Therefore, these csshack mainly aims to solve the compatibility problems of the two browsers. Chinese computer users mainly use Windows operating systems. Therefore, these csshack targets Windows operating system browsers, excluding Mac.
- In line with the current network situation: Internet users are most likely to use IE6 (or IE6 kernel browsers), IE7 (or IE7 kernel browsers), and Firefox again. Therefore, these csshack mainly aims to solve the compatibility problems of these three browsers.
- Practical: These csshack are simple and effective.
Let's say two more words:
- First, we should make it clear that do not use CSS hack, because its backward compatibility is unknown.
- Based on the current situation of the Internet in China, this article mainly introduces the most common and practical CSS hack of IE6, IE7 and FF, but it does not mean that CSS only has these. (For more information, see the CSS hack browser compatibility list)
- Some are actually not CSS hack, but some new CSS selectors, such as "# div1> # div2" and "# div1: First-Child ", this type of selector can be safely used because it has better backward compatibility.
Body
The following csshack is valid in these browsers:
The following csshack is invalid in these browsers: # div1: First-child {
Color: red;
}
# Div1> # div2 {
Font-size: 200%;
}
HTML [xmlns] # div2 {
Text-Decoration: underline;
}
The following csshack is valid in these browsers:
The following csshack is invalid in these browsers: # div2 {
* Border: 2px solid red;
}
The following csshack is valid in these browsers:
The following csshack is invalid in these browsers: # div2 {
_ Width: 100px;
}
* Html # div2 {
Height: 100px;
}
The following csshack is valid in these browsers:
The following csshack is invalid in these browsers: * + html # div2 {
Background-color: Yellow
}
The following is the complete code. You can view it in different browsers to view the effect. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "keywords" content = "Yes! B/S! "/>
<Meta name = "Description" content = "this page is from http://Justinyoung.cnblogs.com"/>
<Title> CSS/JavaScript demo </title>
<Style type = "text/CSS">
*{
Font-size: medium;
Margin: 2px;
Padding: 2px;
}
/*
Valid: FF IE7 OP8
Invalid: IE6
*/
# Div1: First-child {
Color: red;
}
# Div1> # div2 {
Font-size: 200%;
}
HTML [xmlns] # div2 {
Text-Decoration: underline;
}
/*
Valid: IE6 IE7
Invalid: FF OP8
*/
# Div2 {
* Border: 2px solid red;
}
/*
Valid: IE6
Invalid: FF IE7
*/
# Div2 {
_ Width: 100px;
}
* Html # div2 {
Height: 100px;
}
/*
Valid: IE7
Invalid: FF IE6
*/
* + Html # div2 {
Background-color: Yellow
}
/* Test Min-height */
# Div3 {
Border: 1px dotted green;
Width: 100px;
/* Min-height is valid in ff and ie7.
It's very important for kill "auto height" Problem */
Min-Height: 100px;
Height: 50px;
}
</Style>
</Head>
<Body>
<Div id = "div1">
<Div id = "div2">
I'm test text.
</Div>
<Div id = "div3">
Test Min-height!
</Div>
<P>
First, we should make it clear that do not use CSS hack, because its forward compatibility is unknown. <Br/>
Based on the current situation of the Internet in China, this article mainly introduces the most common and practical CSS hack of IE6, IE7 and FF, but it does not mean that CSS only has these. <Br/>
Some are actually not CSS hack, but some new CSS selectors, such as "# div1> # div2" and "# div1: First-Child ", this type of selector can be safely used because it has better backward compatibility.
</P>
</Div>
</Body>
</Html>
Three browsers: