《
IE6-IE7-IE8-FireFox css的浏览器兼容技巧》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335632013.htm
学习心得:
1. IE FF 居中不一样:
text-align:center; //FF
margin-left:auto; //IE
,IE6,7下实现white-space pre-wrap;; margin-right:auto; //IE
2. IE指定的最小高度为18px;
3. IE会自动调剂最小高度;而FF不会,指定多少就是多少.
4. FF如果使用浮动, 则是正常的.
5. IE跟FF在列表上的差别:
使用时用如下参数来使IE和FF的设置同步
ul{
margin:0px;
,IE6 IE7 IE8 Firefox专属CSS hack; padding:0px;
list-style:none;
}
6. h标签 区别:
margin:0px;
padding:0px,IE6 7 8下cssText值与IE9 Firefox Safari Chrome Opera不同;
line-height:123px; //指定一个值
7. border IE=内容+框 FF边框另算
width:298px !important; //FF
width:300px ; //IE
--> [
网站建设之]IE6-IE7-IE8-FireFox css的浏览器兼容技巧
CSS对浏览器的兼容性有时让人很头疼，或许当你懂得当中的技巧跟原理，就会感到也不是难事，从网上收集了IE7,6与Fireofx的兼容性处置方式并收拾了一下。对于web2,
IE10对CSS3新特性的支持和HTML5新特性的支持.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为
#imfloat{
float:left;
margin:5px;/*IE下懂得为10px*/
display:inline;/*IE下再理解为5px*/}
3.浮动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;
4 IE与宽度和高度的问题
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;}
5.页面的最小宽度
min-width是个无比便利的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直准确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个＜div> 放到 ＜body> 标签下，然后为div指定一个类,然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? “600px”: “auto” );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的断定来实现最小宽度。
6.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采取外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是症结}
＜div id=”box”>
＜div id=”left”>＜/div>
＜div id=”right”>＜/div>
＜/div>
7.IE捉迷藏的问题
当div利用庞杂的时候每个栏中又有一些链接，DIV等这个时候轻易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确切在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面构造尽量简单。
8.float的div闭合;肃清浮动;自适应高度;①例如：＜#div id=”floatA” >＜#div id=”floatB” >,
IE&FF css hack集;＜#div id=”NOTfloatC” >这里的NOTfloatC并不盼望持续平移，而是愿望往下排。(其中floatA、floatB的属性已经设置为float:left;)
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必需将float标签闭合。在 ＜#div class=”floatB”> ＜#div class=”NOTfloatC”>之间加上 ＜#div class=”clear”>这个div一定要注意地位，而且必须与两个存在float属性的div同级，之间不能存在嵌套关联，否则会产生异样。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包括float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描写可能就是float:left.有的时候我们需要在n栏的float div后面做一个同一的背景,譬如:
＜div id=”page”>
＜div id=”left”>＜/div>
＜div id=”center”>＜/div>
＜div id=”right”>＜/div>
＜/div>
比方我们要将page的背景设置成蓝色,以达到所有三栏的背景色彩是蓝色的目标,但是我们会发现跟着left center right的向下拉长,而page竟然保留高度不变,问题来了,起因在于page不是float属性,
id和class的选择,而我们的page因为要居中,不能设置成 float,所以我们应当这样解决
＜div id=”page”>
＜div id=”bg” style=”float:left;width:100%”>
＜div id=”left”>＜/div>
＜div id=”center”>＜/div>
＜div id=”right”>＜/div>
＜/div>
＜/div>
再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(十分主要!)
对于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
/* 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 */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
９．高度不适应 ,
id和class到底要用哪一个？;
高度不适应是当内层对象的高度产生变更时外层高度不能主动进行调节，特殊是当内层对象使用margin 或paddign 时。
例：
#box {background-color:#eee,
HTTPS的七个误解（译文）; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
}
–>
＜/style>
FF与IE
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”>
＜!–
a:link {}
a:visited {}
a:hover {}
a:active {}
–>
＜/style>
4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,
Http Message结构学习总结,所以先定义 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{}div{}
这个对于IE6.0和IE6.0以下的版本都暗藏,FF和OPera作用.属性取舍器和子选择器仍是有区别的,子挑选器的规模从情势来说缩小了,属性选择器的范畴比拟大,如p中,所有p标签中有id的都是同样式的.
9.最狠的手腕 - !important;
如果切实没有方法解决一些细节问题,可以用这个办法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px ,
HTML标签的默认CSS样式汇总!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”这个货色了。
ASPNETusStan.mspx?mfr=true
IE6,IE7,FF
IE7.0出来了，对CSS的支撑又有新问题。阅读器多了，网Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意次序。
这样也属于CSS HACK，不外没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种，是应用IE专用的前提解释
＜!–其余浏览器 –>
＜link rel=”stylesheet” type=”text/css” href=”css.css” />
＜!–>
＜!– 适合于IE7 –>
＜link rel=”stylesheet” type=”text/css” href=”ie7.css” />
＜![endif]–>
＜!–>
＜!– 合适于IE6及一下 –>
＜link rel=”stylesheet” type=”text/css” href=”ie.css” />
＜![endif]–>
第三种，css filter的措施，以下为经典从国外网站翻译过来的。.
新建一个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各版本以外的浏览器上。
对IE6和FF的兼容可以斟酌以前的!important 个人比较爱好用第一种，简练，兼容性比较好。
Tag：IE6 IE7 IE8 Firefox CSS 浏览器兼容 IE6 IE7 IE8 Firefox CSS 浏览器兼容
(责任编辑：网站建设)
IE6-IE7-IE8-FireFox css的浏览器兼容技巧相关文章