文章
div+css兼容性问题学习总结
2011/7/5 21:48:41
hack模型
firefox ie7 ie6
left: *left: _left:
注：IE都能识别*;尺度阅读器(如FF)不能识别*；
IE6能识别*，但不能辨认 !important,芭蕾舞鞋,
IE7能辨认*，也能辨认!important;
FF不能识别*，但能识别!important;IE6 IE7 FF
IE6支持下划线"_"，IE7和firefox均不支撑下划线。
margin-left:20px !important;
margin-left:10px;
ie7优先斟酌第一条，而ie6不支撑优先级，所以忽详第一条，便按第两条显示.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
其他兼容技能(再次烦琐)
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; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么正在firefox下字体色彩显示为#333，IE6下字体色彩显示为#666，IE7下字体色彩显示为#999。
2 css布局中的IC交易网居中问题
重要的样式定义如下：
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 IC交易网浮动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;
5 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;}
6 页里的最小宽度
min-width是个十分便利的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版不断准确。但IE不认得这个，
而它实践上把width该做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 搁到 <body> 标签下，然后为div指订一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是一般的；但第2行的width使用了Javascript，这只要IE才认得，这也会让您的HTML白档不太正规。它实践上通功Javascript的断定来完成最小阔度。
7 肃清浮动
.hackbox{ display:table; //将对于象做为块元荤级的表格显示}或许.hackbox{ clear:both;}
或许参加:after（伪对象）,设放在对象后产生的内容，通常和content合作使用，IE不支持彼伪对象，非Ie 阅读器支撑，
所以并不影响到IE/WIN涉猎器。这类的最费事的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE白原发生3象荤的bug
右边对象浮动，右边采取外补丁的右边距来定位，右边对象内的白原会离右边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是要害}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>
9 属性挑选器(这个不能算是兼容,是暗藏css的一个bug)
p[id]{}div[id]{}
这个关于IE6.0和IE6.0以下的版原皆暗藏,FF和OPera做用
属性挑选器和子选择器仍是有区别的,子选择器的规模自情势来道缩小了,属性选择器的范畴比拟大,如p[id]中,一切p本签中有id的皆是同样式的.
10 IE捕迷躲的答题
当div利用庞杂的时分每个栏中又有一些链交，DIV等这个时分轻易产生捕迷躲的问题。
有些内容显示不进去，当鼠标挑选这个区域是发明内容确切在页面。
解决措施：对#layout使用line-height属性 或者者给#layout使用流动高和宽。页面构造绝质简略。
11 高度不顺应
高度没有顺应是当内层对于象的高度产生变化时外层高度不能主动入止调理，特殊是该内层对象使用
margin 或者padding 时。
例：
<div id="box">
p对象中的内容
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center;}
解决方式：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或许为DIV加上border属性。 相关的主题文章：
firefox ie7 ie6
left: *left: _left:
注：IE都能识别*;尺度阅读器(如FF)不能识别*；
IE6能识别*，但不能辨认 !important,芭蕾舞鞋,
IE7能辨认*，也能辨认!important;
FF不能识别*，但能识别!important;IE6 IE7 FF
IE6支持下划线"_"，IE7和firefox均不支撑下划线。
margin-left:20px !important;
margin-left:10px;
ie7优先斟酌第一条，而ie6不支撑优先级，所以忽详第一条，便按第两条显示.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
其他兼容技能(再次烦琐)
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; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么正在firefox下字体色彩显示为#333，IE6下字体色彩显示为#666，IE7下字体色彩显示为#999。
2 css布局中的IC交易网居中问题
重要的样式定义如下：
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 IC交易网浮动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;
5 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;}
6 页里的最小宽度
min-width是个十分便利的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版不断准确。但IE不认得这个，
而它实践上把width该做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 搁到 <body> 标签下，然后为div指订一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是一般的；但第2行的width使用了Javascript，这只要IE才认得，这也会让您的HTML白档不太正规。它实践上通功Javascript的断定来完成最小阔度。
7 肃清浮动
.hackbox{ display:table; //将对于象做为块元荤级的表格显示}或许.hackbox{ clear:both;}
或许参加:after（伪对象）,设放在对象后产生的内容，通常和content合作使用，IE不支持彼伪对象，非Ie 阅读器支撑，
所以并不影响到IE/WIN涉猎器。这类的最费事的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE白原发生3象荤的bug
右边对象浮动，右边采取外补丁的右边距来定位，右边对象内的白原会离右边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是要害}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>
9 属性挑选器(这个不能算是兼容,是暗藏css的一个bug)
p[id]{}div[id]{}
这个关于IE6.0和IE6.0以下的版原皆暗藏,FF和OPera做用
属性挑选器和子选择器仍是有区别的,子选择器的规模自情势来道缩小了,属性选择器的范畴比拟大,如p[id]中,一切p本签中有id的皆是同样式的.
10 IE捕迷躲的答题
当div利用庞杂的时分每个栏中又有一些链交，DIV等这个时分轻易产生捕迷躲的问题。
有些内容显示不进去，当鼠标挑选这个区域是发明内容确切在页面。
解决措施：对#layout使用line-height属性 或者者给#layout使用流动高和宽。页面构造绝质简略。
11 高度不顺应
高度没有顺应是当内层对于象的高度产生变化时外层高度不能主动入止调理，特殊是该内层对象使用
margin 或者padding 时。
例：
<div id="box">
p对象中的内容
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center;}
解决方式：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或许为DIV加上border属性。 相关的主题文章：
"
