Shulou(Shulou.com)06/03 Report--

This article will explain in detail what CSS writing skills and CSSHACK skills are, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

What is CSS Hack?

The parsing results of CSS are different in different browsers, so the page effect of the same CSS output is different, which requires CSS Hack to solve the local compatibility problem of the browser. The process of writing different CSS code for different browsers is called CSS Hack.

There are three common forms of CSS Hack: CSS attribute Hack, CSS selector hack, and IE conditional comment Hack. Hack is mainly aimed at IE browsers.

1. Attribute-level Hack: for example, IE6 can recognize underscores "_" and asterisks "*", IE7 can recognize asterisks "*", but can not recognize underscores "_", and firefox can not recognize either.

2. Select symbol-level Hack: for example, IE6 can recognize * html .class {}, IE7 can recognize * + html .class {} or *: first-child+html .class {}.

3. IE conditional comment Hack:IE conditional comment is a non-standard logic statement provided by Microsoft since IE5. For example, for all IE:, for IE6 and the following versions: this type of Hack works not only for CSS, but also for all code written in the judgment statement.

PS: conditional comments can only be executed in IE browsers, and this code is ignored as comments under non-IE browsing. You can load different CSS, JS, HTML, server code, and so on through IE conditional comments.

Different browsers, such as Internet Explorer 6, Internet Explorer, Internet Explorer, 7, Mozilla Firefox, etc., have different understanding of CSS parsing, which will lead to different page effects and can not get the page effects we need. At this time, we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, and can get the page effect we want in different browsers. This process of writing different CSS code for different browsers is called CSS hack, also called writing CSS hack.

Because different browsers have different support for CSS and different parsing results, it is also due to the priority in CSS. We can write different CSS for different browsers according to this.

For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but not the underscore "_", and firefox can not recognize either. Wait

The writing order is to write the CSS of a browser with strong recognition ability at the end. Here is a list of commonly used CSS hack methods

1:!important

! the role of important is to increase the priority of the application of specified style rules.

IE7 and all standard browsers can recognize! important

Distinguish IE6 from IE7 from other browsers

The following is the referenced content:

The code is as follows:

.browserTest

{

Border:20px solid # 60A179! important

Border:20px solid # 00F

}

When browsing in Mozilla or IE7, you can understand the priority of! important, so the color of # 60A179 is displayed:

When browsing in IE6, I can't understand the priority of important, so the color of # 00F is displayed:

2RV *

IE can recognize *; standard browsers (such as Firefox) can not *

Distinguish IE6 from Firefox

The following is the referenced content:

The code is as follows:

.browserTest

{

Border:20px solid # 60A179

* border:20px solid # 00F

}

Distinguish IE7 from Firefox

The following is the referenced content:

The code is as follows:

.browserTest

{

Border:20px solid # 60A179

* border:20px solid # 00F

}

Distinguish IE7,IE6 from Firefox

The code is as follows:

.browserTest

{

Border:20px solid # 60A179

* border:20px solid # 00F! important

* border:20px solid #

}

3:_

IE6 supports underlining, while IE7 and firefox do not support underlining

Distinguish IE7,IE6 from Firefox

The following is the referenced content:

The code is as follows:

.browserTest

{

Border:20px solid # 60A179

* border:20px solid # 00F

_ border:20px solid #

}

/ * No matter what method it is, the writing order is firefox in front, IE7 in the middle, and IE6 in the last * /

4:*+html and * html

* + html and * html are IE-specific tags, which are not supported by firefox. And * + html is the unique tag of IE7.

The following is the referenced content:

.browserTest {width: 120px;} / * FireFox fixed * /

* html .browserTest {width: 80px;} / * ie6 fixed * /

* + html .browserTest {width: 60px;} / * ie7 fixed * /

Note:

* + html must ensure that the HACK of IE7 has the following declaration at the top of HTML:

The following is the referenced content:

Here are some common CSS compatibility tips

1) setting padding to div under Firefox will lead to the increase of width and height, but IE will not. (available! Important solution)

2) Center vertically, set line-height to the same height as the current div, and then pass vertical-align: middle; (note that the content does not wrap)

3) level in the middle, margin:0 auto; (not everything, of course)

4) if you want to style the content in a tag, you need to set display: block; (common in navigation tags)

5) double distance generated by floating IE

Under IE, when a div sets float and then sets margin for him, there will be a double margin. The solution is to set display:inline for div.

The following is the referenced content:

The code is as follows:

The corresponding css is

The code is as follows:

# float

{

Float:left

It is understood as 10px*/ under margin:5px;/*IE

Under display:inline;/*IE, it is then understood as 5px*/.

}

The characteristic of Block element is that it always starts on the new line, and the height, width, line height and margin can be controlled (block element). The characteristic of Inline element is that it is on the same line as other elements. Uncontrollable (embedded element)

6) the difference in the interpretation of box model between IE and FF.

# browserTest {width: 650px! important;width: 648pxtactic paddingMuttingleftVu2pxententBackgroundVufff;}

The width displayed by browserTest is 650px

The total width of IE Box is the sum of width+padding+border+margin widths.

The total width of FF Box is the width of width, and the width of padding+border+margin is contained in width.

If there is BOX {WIDTH: "300,300"; PADDING: "5PX";}

Then the width of BOX in IE should be: 310

And the width of the FF is 300.

So when BOX is populated, it should be used like this.

BOX {WIDTH: "300"! IMPORTANT; WIDTH: "290";}

7) ul tags have list-style and padding by default under FF, and it is best to declare them in advance to avoid unnecessary trouble; (common in navigation tags and content lists)

8) as an external wrapper, the div should not fix the height, it is best to add overflow: hidden; to achieve a high degree of self-adaptation.

9) minimum width of the page

Min-width is a very convenient CSS command that specifies that the element must not be less than a certain width, so that typesetting is always correct. But IE doesn't recognize this.

And it actually uses width as the minimum width. To make this command work on IE, you can put a "div" under the "body" tag and specify a class for div:

Then CSS designed it like this:

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

The first min-width is normal; but the width on line 2 uses Javascript, which is recognized only by IE, which also makes your HTML document less formal. It actually achieves the minimum width through the judgment of Javascript.

10: universal float closure

Add the following code to the Global CSS to add to the div that needs to be closed

The following is the referenced content:

The code is as follows:

/ * Clear Fix * /

.clearfix: after

{

Content: ".

Display:block

Height:0

Clear:both

Visibility:hidden

}

* html .clearfix {

Height:1%

}

* + html .clearfix {

Height:1%

}

.clearfix

{

Display:inline-block

}

/ * Hide from IE Mac * /

.clearfix {display:block;}

/ * End hide from IE Mac * /

/ * end of clearfix * /

/ * /

Float left

Float right

# wrap {border:6px # ccc solid; overflow:auto; _ height:1%;}

.column _ left {float:left; width:20%; padding:10px;}

.column _ right {float:right; width:75%; padding:10px; border-left:6px # eee solid;}

What about CSS writing skills and CSSHACK skills to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.