CSS Hack和CSS Conditional Comments

2020-03-24 18:42:58

字体：大中小

来源：转载

供稿：网友

如果你的web站点或html' target='_blank'>应用程序是供给不同的浏览器用户使用的，那么你可能就需要使用到CSS Hack和CSS Conditional Comments，本质上CSS Conditional Comments是CSS Hack的一种。如果你的web站点CSS不是特别复杂，用CSS Hack就能够解决浏览器CSS兼容性问题，但是如果你的站点对用户体验要求比较高或者设计非常绚丽，用CSS Conditional Comments(CSS 条件注释)将是你更好的选择。简单的来说，CSS Hack是通过一些特殊的字符来区分IE6/7/8以及Firefox的，CSS Conditional Comments是给不同的浏览器加载不同的CSS文件（当然，这也可以用js来做）。一、CSS Hack CSS Hack是通过一些特殊的字符来区别IE 6, IE 7, IE 8和Firefox的，浏览器对于不能识别的字符，将会直接过滤掉，有很多字符能够用于CSS Hack，在这里有一个非常详细的列表，下面我只列出了一些比较常用的Hack字符。
view source
print?1 /*区别Firefox和IE 6*/
2 body{
3 background-color: red; /* Firefox */
4 *background-color: yellow; /* IE6/7 */
5 } 区别Firefox 和 IE 71 /*区别Firefox 和 IE 7*/
2 body{
3 background: orange;
4 *background: green;
5 } 区别IE 7 和 IE 61 /*区别IE 7 和 IE 6*/
2 /*ie7显示绿色，ie6显示蓝色*/
3 body{
4 background: green !important;
5 *background: blue;
6 } 区别IE和Firefox1 /*区别IE和Firefox*/
2 body{
3 background-color: red; /* 所有浏览器都支持 */
4 background-color: yellow/9; /* IE6/7/8 */
5 } 区别FF/IE8/IE7/IE61 /*区别IE6/7/8和其他浏览器*/
2 body{
3 background-color: red; /* 所有浏览器都支持 Firefox显示红色 */
4 background-color: green/9; /* IE6/7/8 IE8显示绿色 */
5 *background-color: yellow; /* IE6/7 IE7显示黄色 */
6 _background-color: blue; /* IE6 IE6显示蓝色 */
7 } 从上述代码中，可以看出，书写CSS Hack的顺序为Firefox IE8 IE7 IE6，由高标准向低标准走。
2.关于!important和*+html 引用：http://www.neoease.com/css-browser-hack/ 优先度: (*+html + !important) !important +html1 #bgcolor {
2 background:red !important; /* Firefox 等其他浏览器 */
3 background:blue; /* IE6 */
4 }
5 *+html #bgcolor {
6 background:green !important; /* IE7 */
7 } 二、CSS Conditional Comments 引用：http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/ http://www.yaosansi.com/post/1000.html 条件注释包含一些判断，不过这些判断并不是在js中执行，而是在html中执行，使用的方法也非常简单。
1.基本使用方法1 !--[if XXX]
2 这里是正常的html代码
3 ![endif]-- 2.判断IE浏览器的基本语法1 !--[if IE] / 如果浏览器是IE /
2 !--[if IE 6] / 如果浏览器是IE 6 的版本 /
3 !--[if IE 7] / 如果浏览器是IE 7 的版本 /
4 !--[if IE 8] / 如果浏览器是IE 8 的版本 / 3.逻辑判断逻辑判断并不是很常用，但是其中的”!”常常用于判断非IE浏览器 lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同例句：1 !--[if gt IE 6] / 如果IE版本大于6 /
2 !--[if lte IE 7] / 如果IE版本小于等于7 /
3 !--[if !IE] / 如果浏览器不是IE / 4.使用01 !-- 默认先调用css.css样式表 --
02 link rel="stylesheet" type="text/css" href="css.css" /
03
04 !--[if !IE]
05 !-- 非IE下调用1.css样式表 --
06 link rel="stylesheet" type="text/css" href="1.css" /
07 ![endif]--
08
09 !--[if lt IE 6]
10 !-- 如果IE浏览器版本小于6,调用2.css样式表 --
11 link rel="stylesheet" type="text/css" href="2.css" /
12 ![endif]-- 01 !--[if lt IE 7 ] body ![endif]--
02 !--[if IE 7 ] body ![endif]--
03 !--[if IE 8 ] body ![endif]--
04 !--[if !IE] -- body !-- ![endif]--
05
06 style type="text/css"
07 body.ie6 .test { background-color: blue }
08 body.ie7 .test { background-color: red }
09 body.ie8 .test { background-color: green }
10 /stylehtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS教程：数字和字母将容器撑大问题解决_0

下一篇：Dreamweaver网页制作使用css样式嵌套方法