育才学习网1.用CSS怎么写浏览器兼容的代码
整理关于IE6、IE7、IE8、Firefox兼容性CSS HACK问题，另外CSS3的兼容性不是很好，但是在未来有前途。
1.区别IE和非IE浏览器CSS HACK代码#divcss5{ background:blue； /*非IE 背景蓝色*/ background:red \9; /*IE6、IE7、IE8背景红色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「_」 【示例】：#divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」（米字号），另外IE6可辨识「_」（底线），因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器（像是Firefox、Opera、Google Chrome、Safari等）。3.区别IE6、IE7、Firefox (EXP 1) 【区别符号】：「*」、「_」 【示例】：#divcss5{ background:blue; /*Firefox背景变蓝色*/*background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：IE7和IE6可读「*」（米字号），IE6又可以读「_」（底线），但是IE7却无法读取「_」，至于Firefox（非IE浏览器）则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4.区别IE6、IE7、Firefox (EXP 2) 【区别符号】：「*」、「！important」 【示例】：#divcss5{ background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/*background:orange; /*IE6 背景变橘色*/ } 【说明】：IE7可以辨识「*」和「！important」，但是IE6只可以辨识「*」，却无法辨识「！important」，至于Firefox可以读取「！important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5.区别IE7、Firefox 【区别符号】：「*」、「！important」 【示例】：#divcss5{ background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/ } 【说明】：因为Firefox可以辨识「！important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「！important」，因此可以两个辨识符号来区隔IE7和Firefox。6.区别IE6、IE7 (EXP 1) 【区别符号】：「*」、「_」 【示例】：#tip {*background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：IE7和IE6都可以辨识「*」（米字号），但IE6可以辨识「_」（底线），IE7却无法辨识，透过IE7无法读取「_」的特性就能轻松区隔IE6和IE7之间的差异。
7.区别IE6、IE7 (EXP 2) 【区别符号】：「！important」 【示例】：#divcss5{ background:black !important; /*IE7 背景变黑色*/ background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE7可读取「！important；」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「！important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。8.区别IE6、Firefox 【区别符号】：「_」 【示例】：#divcss5{ background:black; /*Firefox 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE6可以辨识「_」（底线），但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。
以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。
2.请问,iE6浏览器兼容的CSS怎么写
使用“子对象选择符”，如：span >p{color:blue；} 它等同于包含选择符：span p {color:blue;}
还有一个属性：voice-family 它是css中针对残疾人使用的设备进行特别设置的一个方法，使用此方法可以设置阅读方式，现在已成为针对IE6.0一下浏览器的一个特殊的CSS hack 方法。使用方法：
#content {
voice-family:"\"}\"";
voice-family:inherit;
color:red;
}
使用代码中的两句Voice-family属性之后下面的color:red；将不会被IE5.5及以下浏览器所解析。
+hack方法
+号hack方法是最近流行的一种CSS hack，非常简单也易于管理，+号用于区分IE系列浏览器与其他浏览器。
使用方法如下：
#content{
width:500px;
+width:480px; /*IE可执行*/
}
带有加号的属性只能在IE系列的浏览器里运行
3.如何才能编写出兼容各浏览器的CSS
编写出兼容各浏览器的CSS的技巧和方法：1. Div居中问题：div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center；这个的意思就是在父级元素内的内容居中。
2.链接（a标签）的边框与背景a 链接加边框和背景色，需设置 display: block， 同时设置 float: left 保证不换行。参照 menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位， 若不设 height， 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了，很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序： L-V-H-A Code: <style type="text/css"> </style>4. 游标手指cursorcursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以5.UL的padding与marginul标签在FF中默认是有padding值的，而在IE中只有margin默认有值，所以先定义 ul{margin:0;padding:0；}就能解决大部分问题6. FORM标签这个标签在IE中，将会自动margin一些边距，而在FF中margin则是0，因此，如果想显示一致，所以最好在css中指定margin和 padding，针对上面两个问题，我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0；}给定义死了，所以后面就不会为这个头疼了.7. BOX模型解释不一致问题在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px；} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}8.属性选择器（这个不能算是兼容，是隐藏css的一个bug）p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏，FF和OPera作用.属性选择器和子选择器还是有区别的，子选择器的范围从形式来说缩小了，属性选择器的范围比较大，如p[id]中，所有p标签中有id的都是同样式的.9.最狠的手段 - ！important；如果实在没有办法解决一些细节问题，可以用这个方法.FF对于”！important”会自动优先解析，然而IE则会忽略.如下.tabd1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过10.IE,FF的默认值问题或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，你完全可以不用”！important”这个东西了。
我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。
11.为什么FF下文本无法撑开容器的高度 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的，那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px；这里为了照顾不认识min-height的IE6 可以这样定义： { height:auto!important; height:200px; min-height:200px; }12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了， FF中我们使用JS插入 的方法来解决 <style type="text/css"> </style>
4.怎么才能让自己写的css 样式 兼容所有浏览器呢
利用 CSS Hack 兼容左右浏览器通过CSS Hack解决各浏览器的兼容问题，是现在普遍采用的方法。
我分享一些常用的CSS Hack写法。……<！[endif]--> ……<！[endif]--> ……<！[endif]--> ……<！[endif]-->.csshack{ padding:10px; padding:9px\9； /* 所有 ie */ *padding:5px; /* ie6和ie7 */ +padding:7px; /* ie7 */ _padding:6px; /* ie6 */ }这些是比较常用的CSS Hack写法，可以解决大部分兼容问题。
5.如何在同一css中写兼容IE7和IE8的CSS样式
解决方法如下：
.test{
color:#000000;/* FF,OP支持 */
color:#0000FF\0; /* IE8支持*/
[color:#000000;color:#00FF00;/* SF,CH支持 */
*color:#FFFF00;/* IE7支持 */
_color:#FF0000;/* IE6支持 */
}
或者 在头部<head></head>；添加里添加
<meta patible" content="ie=7" />
即可！
转载请注明出处育才学习网 » 兼容ie的css怎么写