Examples of practical CSS hack (with source code) that conforms to the Chinese characteristics and network status)

Source: Internet
Author: User
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:

  1. First, we should make it clear that do not use CSS hack, because its backward compatibility is unknown.
  2. 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)
  3. 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:

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.