Home > Article > Web Front-end > What is CSS hack_html/css_WEB-ITnose
What is CSS hack_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:441010browse
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如 IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：
我在IE6中看到是红色的，在firefox中看到是绿色的。
Explanation:
The above css is in Firefox. It cannot recognize the stuff with an asterisk * at the back, 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 method:
Distinguish between IE6 and FF:
background:orange;*background :blue;
The difference between IE6 and IE7:
background:green !important;background:blue;
The difference between IE7 and FF:
background:orange; *background:green;
Difference between FF, IE7 and IE6:
background:orange;*background:green !important;*background:blue;
Note: IE can recognize *; standard browser ( For example, FF) cannot recognize *;
IE6 can recognize *, but not !important,
IE7 can recognize *, and it can also recognize !important;
FF cannot recognize *, but can recognize !important;
IE6 IE7 FF
* √ ×
!important √
Add one more, underscore "_",
IE6 supports underscore, IE7 Neither Firefox nor Firefox supports underscores.
So you can also distinguish IE6, IE7, firefox in this way
background:orange;*background:green;_background:blue;
Note: No matter what method is used, the order of writing Firefox is written at the front, IE7 is written in the middle, and IE6 is written at the end.
Attachment: CSS browser compatibility table in one column
b{_flaot:left;} IE6
b{ flaot:left} IE6-7
b{float:left !important;} IE6-8b FF
b{float:right;}
b{float:left !important;float:right;} IE7-8b FF
/**//*/
b{float:left;} IE8b
/**/
html*b{float:left;} IE6-7
body>b{float:left;} IE7-8b FF
html[xmlns] b{float:left;} IE7-8b FF
b{/*/*/float:left;/* */} IE6-7 FF
opaque
< ;div id="alpha">translucent
This article is excerpted from "IT Learner" http:www.itlearner.com/article/2009/4414.shtml
< ;div id="alpha">translucent
This article is excerpted from "IT Learner" http:www.itlearner.com/article/2009/4414.shtml
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
Previous article：The importance of HTML document types_html/css_WEB-ITnoseNext article：The importance of HTML document types_html/css_WEB-ITnose