css样式兼容ie_育才学习网

兼容ie的css怎么写

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> /* intLen){strTemp+=strContent.substr(0,intLen)+" ";strContent=strContent.substr(intLen,strContent.length);}strTemp+=" "+strContent;obj.innerHTML=strTemp; } if(document.getElementById&&!document.all)toBreakWord("ff",。

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写法，可以解决大部分兼容问题。