All the css hack knowledge you want to know has been sorted out for you

May 04, 2021 CSS

2. How Hack is written under each browser

4. The browser recognizes the corresponding table for the character standard

When writing CSS style, I am afraid the biggest headache is the compatibility problem under each browser, that is, CSS hack, different browsers to CSS resolution results are different, resulting in the same CSS output of different page effects, which requires CSS hack to solve the browser local compatibility problems. Using CSS, hack will use your CSS code part to lose its function, and then use the conditional style to parse the original CSS code in some browsers, while the CSS hack code replaces the original CSS part of the code in a browser that meets the requirements.

In addition to handling CSS code that is not compatible with the browser, CSS hack allows us to customize different versions of the browser to write different CSS effects through CSS hack.

All the css hack knowledge you want to know has been sorted out for you

The basic concept of css hack

CSS hack is by adding some special symbols in the CSS style, let different browsers recognize different symbols (what kind of browser recognizes what symbols are standard, CSS hack is to let you remember this standard), in order to achieve the application of different CSS styles, such as .kwstu (width:300px; _ width:200px; , the general browser will first give the element to use width: 300px; s tyle, followed by a _width: 200px; B ecause the underscore _width is recognized only by IE6, this style actually sets the width of the object in IE6 to 200px, the front is overwritten later, and other browsers do not recognize that _width does not perform _width:200px; T his sentence style, so in other browsers set the width of the object is 300px;

Simply put, CSS hack refers to the processing of web content errors (such as what we often say are misalmed) when CSS content is interpreted between versions and brand browsers. B ecause the kernels of each browser are different, it will cause some errors like JS, a JS web page effect, which works in Microsoft IE6, IE7, and IE8 browsers, but may not work in Mozilla Firefox Google Browser, so it's called JS hack, so for CSS they solve the differences that browsers use to explain the different browsers to CSS to make different CSS style settings H ack。

CSS Hack is common in three forms: CSS property Hack, CSS selector Hack, and IE condition annotation Hack, Hack is primarily for Internet Explorer.

1, property-level Hack: for example, IE6

can recognize underscores

and asterisks, IE7 can recognize asterisks, but can not recognize underscores, and firefox neither can recognize.

2, selector-level Hack: for example, IE6 can recognize the "html .class", IE7 can identify the "html.class" or ": first-child" html .class.

3, IE condition comment Hack:IE condition comment is a non-standard logical statement provided by Microsoft from IE5. F or example, for all IE:-lt;! - if IE - F or IE6 and the following versions: This type of Hack is effective not only for CSS, but for all code written in judgment statements.

PS: Conditional comments can only be executed under the IE browser, and this code is turned a blind eye to comments under non-IE browsing. Different CSS, JS, HTML, server codes can be loaded with IE conditional comments, and so on.

Tip: There are three common forms of CSS hack for more explanations, and you can refer to the "CSS hack collection" section of CSS3 Learning Notes.

How Hack is written under each browser

1、Firefox

@-moz-document url-prefix() { .selector { property: value; } }
The above is a write that is only recognized by the Firefox browser, as follows:

@-moz-document url-prefix() { .demo { color:lime; } }
There are several other ways to support Firefox:

/?Supports all firefox versions of the #selector ./id=selector. . O r: s-moz-document url-prefix() s .selector sproperty: value; S upport for all Gecko kernel browsers (including Firefox) . }

2. WEBKIT 枘 (Chrome and Safari)

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
The above is written primarily for browsers with the Webkit kernel, such as Google Chrome and Safari:

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

3, Opera browser

html:first-child>body Selector {property:value; O r: @media and (min-width:0) O r: @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) head-body Selector sproperty: value; } }

Above, The Hack of Opera Browser:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }

4, IE9 browser

:root Selector {property: value9; }
Above is the IE9 writing, the specific application is as follows:

:root .demo {color: #ff09; }

5, IE9 and IE9 versions below

Selector {property:value9; }
This writing can only be identified by IE9 and the following versions of IE9, here it is important to note that here "9" can only be "9" can not be anything else, such as "8", otherwise it will lose effect, such as:

.demo {background: lime9; }

6, IE8 browser

@media \0screen{

Selector {property: value; } }

7, IE8 and IE8 and more

Selector {property: value\0; }
This type of writing is supported only by IE8 and above versions of IE8, for example

.demo {color: #ff0; }

8, IE7 browser

*+html Selector{property:value; O r: first-child-html Selector sproperty:value; }
The above two are recognized under the IE7 browser, such as:

*+html .demo {background: green; O r: :: first-child-html .demo-background: green; }

9, IE7 and IE7 versions of the browser

Selector {*property: value; }
The above writing can be identified in IE7 and its following versions, such as:

.demo {*background: red; }

10, IE6 browser

Selector {_property/**/:/**/value; O r: Selector : _property: value; O r: s html Selector sproperty: value; }
The application is as follows:

.demo {_width/**/:/**/100px; O r: .demo . . . _width: 100px; O r: .html .demo .width: 100px; }
The above describes how to identify various Hack writes under various versions of the browser, including IE6-9 and modern versions of browser writing. T aken together, the Hack write for different browsers is divided into two different Hack writes from CSS selectors and CSS properties.

Use CSS Hack with caution

Try not to use CSS Hack to handle compatibility issues in Web page making. B ecause rendering insanity in any browser is most likely caused by our own structure or style not meeting certain requirements of W3C, or violating certain browser rules, we should try to achieve the rendering conformity effect of each browser through structural or CSS modifications, unless you consider CSS's Hack as a last last minute.

Many articles related to CSS Hack on the Web say that adding the character s0 between the property value of CSs and the half sign enables CSS hacking of IE 8 or IE 9 (some say, only IE8 is supported).

An example on the Web is this:

.css-hack {

Color: Red; / * Other browsers display red * /

Color: Blue \ 0; / * IE8, IE9 Display blue * /

+ Color: Green; / * IE7 Display Green * /

_COLOR: brown; / * IE6 shows brown * /

}

The actual tests show that there are three points to note about the CSS Hack above, which is implemented using the character .

1, IE10 can also recognize the added character of the CSS property value (the author does not have IE 11 here, do not know whether IE 11 can also be recognized).

2. There can be no space between the property value and the value of the property, and if there is a space (e.g. blue , 0), it will expire in IE 8 and be valid only for IE 9/IE 10.

3. What if we just want to CSS Hack IE 8/IE 9? A t this point, we remove the next two lines of code related to IE6 and IE7.

.css-hack {

Color: Red; / * Other browsers display red * /

Color: Blue \ 0; / * IE8, IE9 Display blue * /

}

At this point, in the IE 6, IE 7 browser, you will find that what you see is not red, but black (that is, the default font color)!

This is because the general browser's idea is to filter out invalid css property values and then get the last css property values based on priority from the correct property settings. I nstead of filtering out an invalid property value, the IE 6/7 browser gets the last CSS property value based on priority, and then ignores it if it is invalid. T herefore, if, as stated online, CSS Hack, which uses only .0 to implement IE 8 plus, can damage the display in IE6/7. Y ou must restore the style of IE6/7 with additional css property settings.

Because, we can't simply conclude that CSS Hack for IE 8, IE 9, or even IE 10 plus can be implemented using .

The browser recognizes the corresponding table for the character standard

<! - [i! ip]> <! -> Except for IE, you can identify <! - <! [endif] ->

<! - [i i i]> All IE recognizes <! [endif] ->

<! - [i i e 6]> IE6 can be identified <! [endif] ->

<! - [i i i i 6]> IE6 and IE6 below can be identified <! [endif] ->

<! - [if gte ie 6]> IE6 and IE6 or above can be identified <! [endif] ->

<! - [i i 7]> IE7 can be identified <! [endif] ->

<! - [i [i i 7]> IE7 and IE7 below can be identified <! [endif] ->

<! - [if gte IE 7]> IE7 and IE7 or above can be identified <! [endif] ->

<! - [i i ie 8]> IE8 can be identified <! [endif] ->

<! - [IF IE 9]> IE9 can be identified <! [endif] ->

The following can be analyzed from the table above:

1. Most special characters IE browser support, other mainstream browsers firefox, chrome, opera, safari does not support (except opera recognizable).
2. s9: All IE browsers are supported
3. and - : IE6 only
4. : IE6, E7 support
5. : IE8, IE9 support, opera partial support
6. .9-0: IE8 partial support, IE9 support
7. Support for IE8, IE9

css hack compatibility tips

1, FF under the div set padding will cause width and height to increase, but IE will not. (Available!important resolution)

2, centering the problem
(1). Vertical centering. Set line-height to the same height as the current div, and then through vertical-align: middle. ( Be careful not to line up the content.)
(2). Horizontal center. margin: 0 auto; (not 10,000, of course)

3, if you want to style the contents of the a label, you need to set display: block;

4, the difference between FF and IE's understanding of BOX leads to a difference of 2px and the issue of double the div set to float under ie

5, ul tag under FF by default list-style and padding . I t is best to declare in advance, to avoid unnecessary trouble. (Common for navigation labels and content lists)

6, as the div of the external wrapper do not set the height, it is best to add overflow: hidden. To achieve a high degree of adaptive

7, about the hand-shaped cursor. c ursor: pointer. H and is only available for IE

css style for firefox ie6 ie7

Now most of them are hacked with !important, which works fine for ie6 and firefox tests, but ie7 pairs! important can be interpreted correctly, causing the page to not show as required! A good hack way to find a pin on IE7 is to use the "

Now write a CSS that can do this:

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

Then the font color under firefox is displayed as s333, the font color under IE6 is shown as #666, and the font color under IE7 is shown as s999.

Centering issues in the CSS layout

The main style definitions are as follows:

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Description:

First define text-align: center This means that the content within the parent element is centered;

But it can't be centered in mozilla. T he solution is to add margin-right: auto when the child margin-right: auto;margin-left: auto;

It should be noted that if you want to center the entire page in this way, it is recommended not to put it in a DIV, you can split multiple divs in turn,
Just define margin-right: auto;margin-left: auto; That's it.

The box model is interpreted differently

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

Floating IE produces double the distance

#box {float: Left; width: 100px; margin: 0 0 0 0 100px; // This situation IE will generate 200PX distance display:inline; / / Ignore floating}

Here's a closer look block inline two inline Block element is characterized by: always start on a new line, height, width, line height, margin can be controlled (block element); Inline are characterized by the fact that they are on the same line as ,... Uncontable (embedded elements);

#box{ display:block; Y ou can simulate an embedded element as a block element display:inline; Effect diplay:table that achieves the same line arrangement;

IE does not recognize the definition of min-, but in practice it width and height as if there min conditions. T his is a big problem, if only width and height, the normal browser these two values will not change, min-width min-height IE is simply equal to no set width and height. F or example, to set the background picture, this width is more important. To solve this problem, you can do this:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

The minimum width of the page

min-width a very convenient CSS command that specifies that the element is smallest or less than a certain width, so that typography is always correct. B ut IE doesn't recognize this, and it actually makes width the minimum width. To make this command work on IE, you can put a <div> <body> specify a class for div:

CSS then designs it this way:

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}

The first min-width but the second line width uses JavaScript, which is recognized only by IE, which also makes your HTML documents less formal. It actually achieves the minimum width through Javascript's judgment.

Clear the float

.HACKBOX {Display: table; // Display the object as a block element level table display} or .hackbox {clean: Both;}

Or :after which sets what happens after the content which is not supported by IE, and not supported by the IE browser.

So it doesn't affect the IE/WIN browser. This kind of most troublesome...

#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

Property selector (this is not compatible, it's a bug that hides CSS)

p[id]{}div[id]{}
This is hidden for versions below IE6.0 and IE6.0, FF and OPera act property selectors and sub-selectors are still different, the range of sub-selectors is reduced in form, the range of p[id] p id the same.

IE hide-and-seek issues

When div application is complex, there are links in each column, DIV and so on at this time prone to hide-and-seek problems. Some content does not appear when the mouse selects this area is found to be indeed on the page.

Solution: Use #layout line-height for #layout #layout fixed height and width. T he page structure is as simple as possible.

The height is not suitable

Height inotro fit is when the height of the inner object changes, the outer height cannot be adjusted automatically, especially when the inner object is used
margin or paddign

Cases:

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

Try it out . . .

Workaround: Add 2 empty div object CSS codes to each of the P objects: .1 (height:0px; overflow:hidden; Or add the border property to the DIV.