What is Css Hack_html/css_WEB-ITnose

What is a CSS hack? Since different browsers, such as Internet Explorer 6, Internet Explorer 7, Mozilla Firefox, etc., have different understandings of CSS parsing, the generated page effects will be different and the page effects we need will not be obtained.

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 get the page effects we want in different browsers.
This process of writing different CSS codes for different browsers is called CSS hack, also called writing CSS hack.
What is the principle of CSS Hack?
Because different browsers have different support and parsing results for CSS, and also because of the priority relationship in CSS. We can use this to write different CSS for different browsers.
For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but cannot recognize the underscore "_", and Firefox cannot recognize both. Wait
The writing order is generally to write the CSS of browsers with strong recognition capabilities at the end. How to write is explained in more detail below.
　How to write CSS Hack
For example, to distinguish between IE6 and firefox browsers, you can write like this:
　
I see it as red in IE6 and green in firefox.
Explain:
The above css is in Firefox. It cannot recognize what the asterisked stuff behind it is, so it filters it out and ignores it. The result of the analysis is: div {background:green}, so of course the background of this div is green.
In IE6, both backgrounds can be recognized, and the result of its analysis is: div{background:green;background:red;}, so according to the priority level, the red at the back has a higher priority. , so of course the background color of this div is red.
CSS hack: Distinguish between IE6, IE7, firefox
Distinguish between different browsers, CSS hack writing:
Distinguish between IE6 and FF:
background:orange;*background:blue;
Distinguish between IE6 and FF IE7：
background:green !important; background:blue;
Difference between IE7 and FF:
background:orange; *background:green;
Difference between FF, IE7, IE6:
background: orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;
Note: IE can recognize *; standard browsers (such as FF) cannot recognize *；
IE6 can recognize *, but not !important,
IE7 can recognize * and also !important;
FF cannot recognize *, but can recognize !important;
IE6 IE7 FF " #demo {width:100px;} "For example;
　#demo {width:100px;} /*Executed by FIREFOX, IE6, IE7.*/
　* html #demo {width:120px;} /* Will be executed by IE6, the previous definition will be overwritten by the later one, so the width of #demo is 120px in IE6; */
　* html #demo {width:130px;} /*Will be executed by IE7*/
---------------
So in the end, the width of #demo is interpreted in the three browsers as:
FIREFOX:100px;
ie6:120px;
ie7:130px;

======================Gorgeous dividing line============ ==========

!important in CSS is a very important attribute and sometimes plays a very important role. 52CSS.com does not have much knowledge in this area. Let’s read the following article to get a comparative understanding of it. .
When I was writing some CSS code a few days ago, it was difficult for me again, because the damn IE6’s support for CSS is so poor. I haven’t noticed it before, because the things I make are basically based on IE, but The CSS I wrote for my blog this time needs to support more than one browser: IE. The unfortunate thing is that I installed Windows 7, which comes with IE8 browser. I thought there would be no problem, but when I open IE6, misalignment still occurs. , so I decided to see what was going on with IE6.
I wrapped all CSS blocks with borders, and found that the distance between two divs in IE is obviously wider than in other browsers. For example, if you write a div with a margin attribute of 20px, then in IE It seems to be 40px in IE, which is why the accuracy calculation is just right, but it is misaligned in IE.
Later I saw the !important attribute. This attribute is actually included in the CSS specification. As a result, IE6 did not support it. It was precisely because it did not support that many CSSers found a solution. Generally speaking, in CSS, if you write two same attributes in the same CSS block, then the bottom one is actually executed, for example:

view plaincopy to clipboardprint?
.home{
margin-left:20px;
margin-left:40px;
}
.home{
margin-left:20px;
margin-left:40px;
}

Then when executed, it is actually executed according to 40px. The appearance of !important is to allow users to set the priority of the executed statement. If you change the above statement to:

view plaincopy to clipboardprint?
.home{
margin-left:20px!important;
margin-left:40px;
}
.home{
margin-left:20px!important;
margin-left:40px;
}

Then in Firefox, Google browser and IE7 or above, it will be as follows 20px to execute, but under IE6 it still executes as 40px, because IE6 does not support the !important specification, we can follow this rule to meet the design needs of IE6, when we find that the display effects of IE6 and other browsers are different, then Just set two, add the !important tag to the upper one, and do not need to add the lower sentence, so that IE6 will execute it as follows.

====================== Gorgeous dividing line================== ====

It is a commonplace issue that CSS is compatible with various browsers. There are tutorials all over the Internet. The following content is not too novel and is purely a personal summary. I hope it can be helpful to beginners. Certain help.

1. CSS HACK
HACK concept:
Different browsers, such as Internet Explorer 6, Internet Explorer 7, Mozilla Firefox, etc., have different understandings of CSS parsing, so This will cause the generated page effects to be different, and we will 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 get the page effects we want in different browsers. This process of writing different CSS codes for different browsers is called CSS hack,

HACK rules:

IE can recognize it*; standard browsers (such as FF) cannot recognize it* ;
IE6 can recognize *, but not !important,
IE7 can recognize *, but it can also recognize !important;
FF cannot recognize *, but can recognize !important;

IE6 IE7 FF
* √ √ ×
!important × √ √

Browser priority: FF

Example:

Take: " #demo {width:100px;} " as an example;

#demo {width:100px;}
* html #demo {width:120px;}
　 * html #demo {width:130px;}
　 ---------------
　 So in the end, the width of #demo is The explanations of the three browsers are:

FIREFOX:100px;
ie6:120px;
ie7:130px;

The following two methods can solve almost all HACKs today.

1, !important

With IE7’s support for !important, the !important method is now only for IE6’s HACK. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)

Note:
* html HACK for IE7 must ensure that there is the following statement at the top of the HTML:

2. Universal float closure

For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]
Add the following code to Global CSS and add class="clearfix" to the div that needs to be closed. It works every time.

3. Other compatibility tips

1. The
ul tag has a padding value by default in Mozilla, but in IE only margin has a value. So defining ul{margin:0;padding:0;} first can solve most problems. You can also use !important to solve

2. Centering problem.
1). Vertically centered. Set line-height to the same height as the current div, and then pass vertical-align: middle. (Be careful not to wrap the content .)
2). Horizontally centered. margin: 0 auto;(Of course not universal)
You can place any item within the body of the html, and the item will automatically obtain equal left and right boundary values ​​to ensure Displayed in the center. However, this is still a problem in browsers before IE6 and will not be centered, so it must be modified as follows:
body {
text-align: center;
}
#content {
text-align: left;
width: 700px;
margin: 0 auto;
}
Setting the body will cause the main content to be centered, but even all the text will be centered. This is probably not the effect you want. For this reason, the div of #content also needs to specify a value: text-align: left

3. The BOX interpretation of IE5 and IE6 is inconsistent
div{width: under IE5 300px;margin:0 10px 0 10px;}
The width of the div will be interpreted as 300px-10px (right padding)-10px (left padding). The final width of the div is 280px,
while in IE6 and other browsers The top width is calculated as 300px 10px (right padding) 10px (left padding) = 320px.
At this time we can make the following modifications to div{width:300px!important;width:340px;margin:0 10px 0 10px}
I don’t quite understand what this is, I only know that both IE5 and firefox support it. IE6 does not support it. If anyone understands it, please let me know. Thanks! :)

4. Advance declaration of FORM tag and ul tag
These two tags will automatically have some margins in IE, while in FF the margin is 0, so if you want The display is consistent, so it is best to specify margin and padding in css. In response to the above two problems, I generally use this style ul first in my css, and form{margin:0;padding:0;} is defined, so You won’t have a headache later.

5.
cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be displayed in IE

6.
If If the text is too long, change the long part into an ellipsis and display it: IE5, FF is invalid, but it can be hidden, IE6 is valid

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn