!important在ie7.0的hack方法
IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表
小知识：什么是CSS hack？由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。
各浏览器CSS hack兼容表：代码示例：#test{color:red; /* 所有浏览器都支持*/color:red !important;/* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/整体测试代码示例：.test{color:#000000;color:#0000FF\0;[color:#00FF00;*color:#FFFF00;_color:#FF0000;}其他说明：1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv=”x-ua-compatible” content=”ie=7″ />2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。
3、还有其他写法，比如：*html #test{}或者*+html #test{}4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：/TR/html4/loose.dtd5、顺序：Firefox、IE8、IE7、IE6依次排列。
IE6,IE7,IE8,FF的兼容方法
IE6,IE7,IE8,FF的兼容方法(2)浏览器兼容代码：浏览器符号IE6 IE7 IE8 FF * !important _ \9 *html *+html 说明：代表能识别；代表不识别1、案例一（常用）如果各个浏览器的高度都不相同，代码如下：.warp{ Height:100px; /*IE6、IE7、I浏览器兼容代码：说明：”√”代表能识别；” ×”代表不识别1、案例一（常用）如果各个浏览器的高度都不相同，代码如下：.warp{Height:100px; /*IE6、IE7、IE8、FF识别*/Height:110px\9; /*IE8识别*/*height:120px!important; /*IE7 识别*/*height:130px; /*IE6、IE7识别，但上一段代码中!important的级别比*号的级别高，所以此段代码只有IE6中才有效*/}2、案例二如果各浏览器高度只有IE6和IE7中相同，而FF不同，代码如下：.warp{Height:100px; /*IE6 、IE7、 IE8、FF识别*/*height:120px; /*IE6、IE7识别*/}3、案例三对各浏览器单独写不同代码，如下：.warp{ height:200px; } /* IE6 、IE7、 IE8、FF识别*/.warp{ height:300px\9;} /*IE8识别*/*html .warp{ hegith:210px; } /*IE6识别*/*+ html .warp{ height:300px;} /*IE7识别*/4、案例四如果各浏览器高度相同只有IE6的不同，代码如下：.warp{Height:100px; /* IE6 、IE7、 IE8、FF识别*/ _Height:120px; /*IE6识别*/}。
兼容IE6,IE7,Firefox的CSS写法大全
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
4 浮动ie产生的双倍距离
CSS:
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和xxx元素在同一行上,…不可控制(内嵌元素);
CSS:
.clearfix:after{
content:“.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-block;
}
.clearfix {display:block;}
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
css padding兼容性问题
首先谈谈!important问题的引起（盒模型问题）:在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border）和外边距（margin）。
而Width宽度的计算，CSS有它的标准。
但是实际上，不同的浏览器的表现却不同。
比如，Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说：层的宽度= width + padding(left and right) + border-width；而IE则把width作为整个层的宽度：内容的宽度= width - padding - border-width；IE的这种解析，被认为是一个BUG。
但事实上，这种解释也不无道理，人们在设计页面的时候关注得更多的是盒子的大小，而不是内容的大小。
正是因为浏览器的不同解析，给CSS的设计带来一些困难。
针对这个问题，我们经常使用!important来区分Firefox和IE6.0：程序代码:#content{width: 414px !important;width: 400px;padding: 5px;border-width: 2px;}Firefox识别!important，而IE不识别，且!important的width优先级高，因此FF理解为width: 400px，IE6.0理解为width: 414px，从而显示就相同了。
但是问题出在IE7，IE7.0对!important有了识别能力，但是对盒模型的解析却和IE6.0等一样，从而造成很大的麻烦。
也就是说，!important的方法在IE7.0下变得不适用了。
而一般的情况下，border的使用相对较少的，并且border-width一般较小，因此最主要的问题就出在padding上了。
网上很多人总结的经验是：padding要尽量少用，能用margin的，就别用padding。
这种说法是消极的，问题的解决不应该总是回避。
在IE和火狐浏览器下页面兼容性问题的处理(最完整篇)
最全的CSS浏览器兼容问题CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS处理,作为W3C的标准,一定要加 DOCTYPE声名.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”> 相应的css为#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:00 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block;//可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果diplay:table;4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
浏览器不兼容原因及解决方案
浏览器间不兼容原因及解决办法网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6。
0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS，最大化兼容浏览器.一般情况下，我都会兼顾IE 6。
0 / IE 7.0 / firefox 2。
0浏览器，下面是用的较频繁的CSS Hack技巧：用的最广莫过于！important了，它可以针对IE(IE 7.0能正确理解!important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important，就可以针对其优先了。
所以为了兼顾IE 6。
0与火狐之间的差异，我都会使用!important。
1、仅IE7与IE5。
0可以识别＊+html select {…｝当面临需要只针对IE7与IE5。
0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别*+html select {…！important;｝当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别＊ html select ｛…｝这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。
其它浏览器不识别。
4、html/**/ >body select {…}这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6select ｛ display /*屏蔽IE6＊/:none;}这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5select/＊*/ { display /*IE6,IE5不识别*/：none；}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
如何解决IE兼容性问题
如何解决IE兼容性问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。
随着浏览器版本的增多，解决IE浏览器兼容性显得尤为重要.一、!important (功能有限)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 200px; /* IE6 */}二、CSS HACK的方法(新手可以看看，高手就当路过吧)首先需要知道的是：所有浏览器通用 height: 100px;IE6 专用 _height: 100px;IE7 专用 *+height: 100px;IE6、IE7 共用 *height: 100px;IE7、FF 共用 height: 100px !important;例如：#example { height:100px; } /* FF */* html #example { height:200px; } /* IE6 */ *+html #example { height:300px; } /* IE7 */ 下面的这种方法比拟简单举几个例子：1、IE6 - IE7+FF#example {height:100px; /* FF+IE7 */_height:200px; /* IE6 */}其实这个用上面说的第一种方法也可以#example {height:100px !important; /* FF+IE7 */height:200px; /* IE6 */}2、IE6+IE7 - FF#example {height:100px; /* FF */*height:200px; /* IE6+IE7 */}3、IE6+FF - IE7#example {height:100px; /* IE6+FF */*+height:200px; /* IE7 */}4、IE6 IE7 FF 各不相同#example {height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */}或：#example {height:100px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */}需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。
css中!important的用法
css中!important的用法CSS中!important的用法CSS（Cascading Style Sheets）是一种用于控制网页样式的标记语言，通过应用CSS，我们可以轻松地改变网页的颜色、字体、排版等元素。
CSS中包含了很多选择器和属性，但有些时候，我们需要在某些情况下强制使用某个属性。
为了实现这种强制使用效果，CSS中引入了!important。
什么是!important？!important是CSS中的一个关键字，用于强制覆盖其他样式规则，表示这个属性是不可忽略的、必须要使用的。
其作用是在样式表的优先级结构中最高的，可以覆盖其他的样式规则，即使这些规则拥有更高的优先级。
!important在CSS中的使用方法!important的使用方法非常简单，只需要在属性值的后面加上!important即可。
例如：```h1 {color: blue !important;}```这样就会强制将h1元素的文本颜色设置为蓝色，无论其他样式规则如何设置，都不会影响这个属性。
值得注意的是，使用!important可以有效避免样式覆盖问题，但也可能会对网页维护和管理带来一定的困难。
因为当我们使用!important后，该属性就会成为不可变的，如果我们需要更改该属性时，也必须使用!important，这样就会增加了样式表的复杂度和维护的难度。
!important在CSS中的优先级CSS中，存在一种样式覆盖的机制，简单来说，就是样式优先级。
当一个元素存在多个样式时，会根据这些样式的优先级来决定最终呈现效果。
而!important正是通过将样式的优先级设置为最高，实现强制覆盖其他样式规则的。
在CSS中，样式的优先级是由多个规则组成的，规则越多，它的优先级越高，下面是CSS中规则的优先级从高到低的排列：1. !important标记当一个属性被强制声明了！important，它就拥有了最高的优先级，也就是公认的权威。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容
ie7.0,ie6.0和ff,以下为我从国外网站的翻译.
新建一个css样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
<div id="item">some text here</div>
在body表现这里加入lang属性,中文为zh：
<body lang="en">
现在对div元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试：
ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux
其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用。