育才学习网1.请问,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系列的浏览器里运行
2.CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了， 网络上的教程遍地都是.以下内容没有太多新颖， 纯属个人总结， 希望能对初学者有一定的帮助.一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对！important的支持， ！important 方法现在只针对IE6的HACK.（注意写法.记得该声明位置需要提前.）<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对FireFox*+html 与 *html 是IE特有的标签， firefox 暂不支持.而*+html 又为 IE7特有标签.<style>#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed， 注意顺序 */}</style>注意：*+html 对IE7的HACK 必须保证HTML顶部有如下声明：<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "4/loose.dtd">二、万能 float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中，给需要闭合的div加上 class="clearfix" 即可，屡试不爽.<style>/* Clear Fix */.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加， 但IE不会.（可用！important解决）2， 居中问题.1）.垂直居中.将 line-height 设置为 当前 div 相同的高度， 再通过 vertical-align: middle.（ 注意内容不要换行.）2）.水平居中. margin: 0 auto；（当然不是万能）3， 若需给 a 标签内内容加上 样式， 需要设置 display: block；（常见于导航标签）4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明， 以避免不必要的麻烦. （常见于导航标签和内容列表）6， 作为外部 wrapper 的 div 不要定死高度， 最好还加上 overflow: hidden.以达到高度自适应.7， 关于手形光标. cursor: pointer. 而hand 只适用于 IE.1 针对firefox ie6 ie7的css样式 现在大部分都是用！important来hack，对于ie6和firefox测试可以正常显示，但是ie7对！important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样： #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ 那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。2 css布局中的居中问题 主要的样式定义如下：body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto； } 说明：首先在父级元素定义TEXT-ALIGN: center；这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto； ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto； 就可以了。
3 盒模型不同解释#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-} 4 浮动ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px； //这种情况之下IE会产生200px的距离 display:inline； //使浮动忽略}这里细说一下block,inline两个元素，Block元素的特点是：总是在新行上开始，高度，宽度，行高，边距都可以控制（块元素）；Inline元素的特点是：和其他元素在同一行上，。不可控制（内嵌元素）；#box{ display:block； //可以为内嵌元素模拟为块元素 display:inline； //实现同一行排列的的效果 diplay:table;IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}6 页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。
为了让这一命令在IE上也能用，可以把一个 放到 <body> 标签下，然后为div指定一个类：然后CSS这样设计：#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" )；}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也。
3.用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\火狐浏览器兼容问题及解决方法。
4.css before兼容IE6/7如何写
1.CSS部分
类似这样子的命名：
复制代码代码如下：
.example:before, .example before {}
.example:after, .example after {}
一个有冒号，一个是空格分隔。前者IE8+及其他现代浏览器；后者为IE6-7准备的。
2.HTML部分
如果before/after伪类元素含有content内容（不是空字符），则content内容在HTML标签上呈现（方便IE6/7下获取），例如：
复制代码代码如下：
CSS部分的content属性值应该如下：
复制代码代码如下：
.example:before, .example before { content: attr(data-content); 。 }
.example:after, .example after { content: attr(data-content); 。 }
3.JS部分
JS是为IE6/7准备的，所做的事情很简单，网元素内部插入两个元素，标签名为”before“或”after“或同时。方法代码如下：
复制代码代码如下：
var $beforeAfter = function(dom) {
if (document.querySelector || !dom && dom.nodeType !== 1) return;
var content = dom.getAttribute("data-content") || '';
var before = document.createElement("before") //可以根据需要把after或before删除一个
, after = document.createElement("after")； //默认会把两个都加上
// 内部content
before.innerHTML = content;
after.innerHTML = content;
// 前后分别插入节点
dom.insertBefore(before, dom.firstChild);
dom.appendChild(after);
};
4.调用
$beforeAfter(document.getElementById("tip")); //tip是需要的id名
转载请注明出处育才学习网 » 怎么写代码兼容ie6