CSS hack Summary

CSS hack is a special CSS definition technique that we use to ensure compatibility with various browsers. This is a list of CSS hack extracted from other countries. It shows the support of various browsers for CSS hack and is very helpful for us to make compatible webpages.

At present, 99% of the browser's market share is occupied by IE and ff. Therefore, the current hack should mainly target these two browsers.

Currently, the mainstream browsers are IE6 and Firefox. the kernels of these two different browsers are different. at the same time, the two browsers have different understandings of css2.0 in some details. therefore, it is necessary to develop differentCode.

So now we have the CSS hack technology. Of course, njuptsoz believes that with the time recommendation and the advancement of web standards, this hack technology will eventually die out, this can be seen from IE7. however, the current market is still in the world of IE6 and ff. Therefore, it is necessary and necessary to discuss the hack technology!

Shield ie browsers (that is, they are not displayed under IE)

*: Lang (zh) Select{ Font: 12px! Important;}/* ff, OP visible. Note: Due to the recent upgrade of opera, this sentence is only recognized by FF */
Select: Empty { Font: 12px! Important;}/* safari visible */
Here, select is the selector, which can be changed as needed. The second sentence is unique to the Safari browser on Mac.

Only IE7 and ie5.0 can be recognized

* + Html Select{ ...}
This hack can be used only for IE7 and ie5.0.

Only IE7 can recognize

* + Html Select{ ...! Important;}
This hack can be used only for IE7.

Identification of IE6 and IE6 or lower

* Html Select{ ...}
Note that many blogs have written the hack of IE6. In fact, ie5.x can also identify this hack. Not recognized by other browsers.
Html/**/> body Select{ ...}
This sentence serves the same purpose as the previous one.

Only IE6 is not recognized, and IE6 is blocked

Select{ Display/* Block IE6 */: None;}
Here we mainly use CSS annotations to separate an attribute and a value, and comment it before the colon.

Only IE6 and ie5 are not recognized, blocking IE6 and ie5

Select/**/{ Display/* IE6 and ie5 are not recognized */ : None;}
The difference here is that a CSS comment is added between the separator and curly braces. Ie5.5 is not blocked

Only ie5 is not recognized, and ie5 is blocked

Select/* Ie5 does not recognize */{ ...}
This sentence removes the comment of the attribute area from the previous sentence. Only ie5 is not recognized, and ie5.5 is recognizable.

Box Model Solution

Selct{ Width: ie5.x width;Voice-family: "\"} \ ""; voice-family: Inherit; Width: The correct width;}
The box model clearing method is not passed! Important. This should be clear.

Clear floating

Select: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}
In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating hack can be used to define the parent level.

Ellipsis (...)

Select{-O-text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}
This is a good technique to cut out more text and end it with a ellipsis. But Firefox does not currently support it.

Only opera Recognition

@ Media all and (min-width: 0px ){ Select {......}}
Set the Opera Browser separately.

The above are some hack in CSS, which are used to solve the local compatibility problem. If you want to separate the compatibility content, try several filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import the required patch styles through conditions.

Ie5.x filter, only visible to ie5.x

@ Media tty {
I {content: "\";/* "*/} @ import' Ie5win.css';/*";}
}/**/

Ie5/MAC filters are generally not required

/*\*//*/
@ Import" Ie5mac.css";
/**/

If condition hack of IE

<! -- [If IE]> Only IE<! [Endif] -->
All ie identifiable
<! -- [If IE 5.0]> Only ie5.0<! [Endif] -->
Only ie5.0 can recognize
<! -- [If gt ie 5.0]> Only IE 5.0 +<! [Endif] -->
Both ie5.0 and ie5.5 can be identified.
<! -- [If lt IE 6]> Only IE 6-<! [Endif] -->
Only IE6 can recognize
<! -- [If gte ie 6]> Only IE 6/+<! [Endif] -->
Ie5.x under IE6 and IE6 can be recognized
<! -- [If lte ie 7]> Only IE 7 /-<! [Endif] -->
Only IE7 can recognize

The above content may not be comprehensive. You are welcome to join me in summarizing these skills to facilitate future work queries. I would also like to thank the authors who have developed these hack.

This article describes eight useful solutions we have found in CSS design.

2. browser-specific Selector

These selectors are useful when you want to change styles in a browser rather than in other browsers.

IE6 or lower

* HTML {}

Less than IE 7

*: First-Child + HTML {} * HTML {}

Only for IE 7

*: First-Child + HTML {}

Only for IE 7 and modern browsers

HTML> body {}

Only for modern browsers (not IE 7)

HTML>/**/body {}

Latest versions of opera 9 or earlier

HTML: First-child {}

Safari

HTML [xmlns * = ""] body: Last-child {}

To use these selectors, write the code before the style. For example:

# Content-box {
Width: 300px;
Height: 150px;
}
* Html # Content-box {
Width: 250px;
}
/* Rewrite the code above and change the width to 250px.
Applicable in IE6 or earlier versions. */

3. Use transparent PNG images in IE6

A difficult bug in IE6 is that it does not support transparent PNG images.

You may need to use a rewritten CSS Filter to solve this problem:

* Html # image-style {
Background-image: none;
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = "fil
Ename.png ", sizingmethod =" scale ");
}

8. Minimum Width

Another bug in IE is that it does not support the Min-width attribute. Min-width is indeed very useful, especially for a 100%-width variable template because it tells the browser to stop shrinking.

For all browsers except IE6, you only need Min-width: xpx. For example:

. Container {
Min-width: 300px;
}

You need to add extra effort to make these services work under IE6! You need to create two divs, one containing the other.

<Div class = "Container">
<Div class = "Holder"> content </div>
</Div>

Then you need to set the Min-width of the outer layer:

. Container {
Min-width: 300px;
}

Now IE hack is working again. You need to write the following code:

* Html. Container {
Border-Right: 300px solid # FFF;
}
* Html. Holder {
Display: inline-block;
Position: relative;
Margin-Right:-300px;
}

When the browser window adjusts the outer width until it is reduced to the Border width, it cannot be reduced. The holder layer also stops shrinking. The Border width of the outer layer is changed to the minimum width of the inner layer.

9. Hide horizontal scrolling

To remove the horizontal scroll bar, you can insert the overflow-X: hidden attribute in the body.

Body {
Overflow-X: hidden;
}

This is useful when you decide to use an image or flash that is better than the browser.

4. Remove the connection dashed line

When you click the link, Firefox will generate a dotted line box around the link.

This is a good solution. You only need to add outline: none to the tag.

A {
Outline: none;
}

5. Apply the width to the inline element.

If you use width for an inline element, it will only work under IE6.

The HTML Tag is either block or inline. The labels of the inline attribute include <span> <A> <strong> and <em> block labels, including <div> <p>

You cannot control the bandwidth of the inilne tag, but one way is to change the tag attribute from inline to block.

SPAN {
Width: 150px;
Display: block;
}

Apply the display: Block Function to change the span label to the block label to control its width.

6. center a fixed-width website.

To center your website in the browser, you can add the position: relative attribute to the outermost Div and set margin to auto.

# Wrapper {
Margin: auto;
Position: relative;
}

7. Image Replacement Technology

For the header, it is always better to use text instead of images. It is best to use a background image with a hidden text layer in a special place where you must use an image. This is very useful for screen reading and Seo, although still using common text, which can be associated with all the advantages.

HTML:

<H1> <span> main heading one </span>

CSS:

H1 {
Background: url(heading-image.gif) No-Repeat;
}
H1 span {
Position: absolute;
Text-indent:-5000px;
}

As you can see, we use common HTML code for the H1 tag and CSS to replace the image text. Text-indent puts the text at 5000 pixels on the left, so that the user cannot see them.

What is CSS hack?
Different browsers, such as Internet Explorer 6, Internet Explorer 7, and Mozilla Firefox, have different understandings of CSS parsing, which leads to different page effects, we cannot get the page effect we need.

At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers.

This process of writing different CSS codes for different browsers is called CSS hack, also called CSS hack.

What is the principle of CSS hack?
Because different browsers have different support for CSS and parse results, they also have a relationship with the priority of CSS. We can write different CSS for different browsers based on this.

For example, IE6 can recognize underline _ and star number *, and IE7 can recognize asterisks *. When underline _ cannot be recognized, neither Firefox can recognize it. And so on.

The writing order is generally to write the CSS of a browser with strong recognition ability behind. The following describes how to write more details.

How to Write CSS hack
For example, to distinguish IE6 from Firefox, you can write as follows:

<Style>
Div {
Background: green;/* For Firefox */
* Background: red;/* For IE6 */
}
</Style>
<Div> I saw red in IE6 and green in Firefox. </Div>
<Style>
Div {
Background: green;/* For Firefox */
* Background: red;/* For IE6 */
}
</Style>
<Div> I saw red in IE6 and green in Firefox. </Div>

Explanations:
In Firefox, the above CSS does not recognize the stuff with an asterisk *, so it is filtered out and ignored. The parsed result is: div {Background: Green}, so the background of this div is green.
In IE6, both background can be identified. The parsed result is: div {Background: green; Background: red;}, so according to the priority level, the red at the end has a high priority, so of course the background color of this div is red.

Difference between IE6 and FF:
Background: orange; * Background: blue;

Difference between IE6 and IE7:
Background: Green! Important; Background: blue;

Difference between IE7 and FF:
Background: orange; * Background: green;

Difference ff, IE7, IE6:
Background: orange; * Background: Green! Important; * Background: blue;

Note: Both IE and standard browsers (such as ff) cannot recognize *;
IE6 can recognize *, but cannot recognize it! Important,
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;

IE6 IE7 FF
* √ *
! Important × √

The word "hack" is quite commonly used on the Internet. It generally refersProgramOr the system performs unofficial modifications or unofficial patches, which are called hack. Of course, hacker is a hacker. CSS hack can also be understood as a CSS hacker program, it is a kind of skill to improve the expression of CSS in different browsers. Csshack technology enables a CSS style to be parsed by the browser or not by the browser through some special sentences that are supported or not supported by the browser.

CSS hack is used to deal with differences between different browsers. In this way, the style design is fixed for display problems between Some browsers. How to Use CSS hack, for example, the "@ import" and "@ import" statements in CSS are commands recognized by IE after ie5, therefore, if you use @ import to import a style sheet, these style sheets can only be seen in ie5, and ie4 cannot be parsed. Therefore, we use this method to write the style code:
@ Import URL ("newstyle.css ");
Body {
Font-size: 14px;
}

We encode newstyle.css as follows:
Body {
Font-size: 18px;
}

When you browse the Web page, if you use the ie4 browser, the font size is 14px, and if you use ie5 or a later browser, the font size is 18px. This is the basic application form of csshack. Some special commands are used between browsers to hide and display styles. Here, we differentiate the font styles of ie4 and ie4 and later browsers, this achieves the goal of hack.