《
CSS书写顺序建议及CSS HACK(FF&IE兼容)》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332J2013.htm
程序代码 <#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
程序代码：
此外，为了让高度能主动适应，要在wrapper里面加上overflow:hidden;
当包括float的box的时候，高度自动适应在IE下无效，这时候应当触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就到达了兼容。
例如某一个wrapper如下定义：
Tag：CSS CSS hack CSS CSS hack
//显示属性
display
position
float
clear
cursor
…
//本身属性
margin
padding
width
height
/*排版*/
vertical-align
white-space
text-decoration
text-align
…
/*文字*/
color
font
content
/*边框背景
boder和background放在最后的原因是修改的频率会较之前的频繁,CSS之兼容浏览器篇，放在最后查看起来便利。*/
border
background
}
可简略解决IE与FF之间的兼容问题（坚持FF,IE7,IE的顺序），但这种方法貌似对加载有一定的影响 ！
Update2007-12-31 NND快被Opera个丫的折腾瓦解了:
.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}
对 IE8 beta1 可以尝试下面的 Hack：
/*/ selector { … } /**/
此规矩仅 IE8 beta1 识别，而其他 A-grade 浏览器都不识别
>>>------我想分页！--这么长的文章，在这里来个分页多好啊！哈哈-------<<<
Description:
IE支持自定义光标文件cursor:url()
IE支持自定义转动条色彩作风
IE6中的select有永远处在最上的bug,而且css对select不起作用。
在form中，IE支持label，包含文字和图片；但是firefox不支持图片的label，
点击图片不能让label for的radio或者checkbox发生后果。
IE和firefox都是支持onscroll事件的，但是firefox中textarea对此事件不支持。
CSS方面，IE中支持在CSS中嵌入expresion，而Firefox不支持
firefox支择相邻子选择符“>”，而IE6不支持（IE7支持）
firefox 对display的inline-block不支持，而IE均支持。
>>>------我想分页！--这么长的文章，在这里来个分页多好啊！哈哈-------<<<
以下珍藏自：puterjam's Blog
差别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
--------------------------------------------------------------------------------
另外再弥补一个，下划线"_",
IE6支撑下划线，IE7和firefox均不支持下划线。(推举)
于是大家还可以这样来辨别IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不论是什么方法，书写的次序都是firefox的写在前面，IE7的写在旁边，IE6的写在最后面。
>>>------我想分页！--这么长的文章，在这里来个分页多好啊！哈哈-------<<<
这是国外摘来的一张CSS hack列表，显示了各浏览器对css hack的支持水平，对制造兼容网页十分有辅助。
>>>------我想分页！--这么长的文章，在这里来个分页多好啊！哈哈-------<<<
找了一些相干的CSS HACK后，总结的多少个方法。
IE7的hack
IE7 修复了很多 bug，也增加了对一些选择符的支持,CSS之一条龙网站最主要是做好布局，所以当初诸如 *html {} 和 html>body {} 等针对 IE 暗藏或显示的 hack 都会在 IE7 中生效。固然 CSS Hack 不推荐应用，前提注释才是十拿九稳的过滤器，但是条件注释只能涌现在 HTML 中，CSS Hack 仍是有用武之地的。Nanobot 发明了一些针对 IE7 的 CSS Hack，详细就是：
>body
html*
*+html
这三种写法，其中前两种都是分歧法的 CSS 写法，在尺度兼容浏览器中被被忽略，然而 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 取代，也就是将其处置成了 *>body，而且不光对于 > 挑选符，+,~ 选择符中这个景象也存在。对于 html* ，因为 html 和 * 之间不空格，所以也是一种 CSS 语法毛病，但 IE7 不会忽略，而是过错地以为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是正当的 CSS 写法，也就是说可以通过校验器的验证，因而也是作者推荐的 hack 用法。
援用的其他友人的总结：
屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;}
这里select是取舍符，依据情况调换。第二句是MAC上safari浏览器独占的。
仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采取这个HACK。
IE6及IE6以下识别
* html {…}
这个处所要特别留神良多地主都写了是IE6的HACK实在IE5.x同样可以识别这个HACK。其它阅读器不辨认,CSS中视觉语义不等于基于表现的类。
html/**/ >body select {……}
这句与上一句的作用雷同。
用法：
*html #box{…}
仅IE6不识别
#box { display /*IE6不识别*/:none;}
这里重要是通过CSS正文离开一个属性与值,CSS中背景background-position负值定位深入理解，流释在冒号前。
仅IE6与IE5不识别
#box/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在抉择符与花括号之间多了一个CSS解释。
仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注解。只有IE5不识别
盒模型解决办法
selct {width:IE5.x宽度; voice-family :”\”}\”&rdquo,CSS中的继承与优先级总结;; voice-family:inherit; width:准确宽度;}
盒模型的消除方法不是通过!important来处理的。这点要明白。
扫除浮动
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无奈完整的包住全部子级，那么这时用这个肃清浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
节字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出局部的文字，并以省略号结尾，很好的一个技巧。只是目前Firefox并不支持。
只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做独自的设定。
IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:”\”;}} @import ‘ie5win.css’;
IE5/MAC的过滤器，个别用不着
>>>------我想分页！--这么长的文章，在这里来个分页多好啊！哈哈-------<<<
IE与Firefox的CSS兼容随记
程序代码 .colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决计划是在这个div里面加上display:inline;
例如：
<#div id="imfloat"></#div>
相应的css为
程序代码 .clear{
clear:both;}
--> [
网站建设之]CSS书写顺序倡议及CSS HACK(FF&IE兼容)
程序代码 #IamFloat{
float:left;
margin:5px;/*IE下懂得为10px*/
display:inline;/*IE下再理解为5px*/}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)终极div的宽度为280px，而在IE6和其余浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来盘算的。这时咱们可以做如下修正
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太清楚，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告知我一声,CSS中的强制换行与强制不换行，谢了！：）
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
程序代码 <#div id="floatA",
CSS中的图片保存方法; ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
程序代码 ul{margin:0;padding:0;}
程序代码 div{width:300px;margin:0 10px 0 10px;}
.class{
background-color:# FFFF00;/*所有浏览器*/
* background-color:#00FF00;/*IE*/
_ background-color:# 00FFFF;/*IE6*/
}
@media all and(min-width:0){
.class{
background-color:#FF00FF; /*Opera */
} }/*只有Opera识别*/
@media all and (min-width:0){
.class{
background-color:#FF00FF; /*Opera和Sa */
html* .class{
background-color:# 808080; /*Sa*/
}
}}
注：这里所指代的 Safari 和 Opera 普通为最新版本。
2、仅 Firefox 3 和 IE7 识别的 Hack
selector, x:-moz-any-link, x:default {
/* Firefox 3 and IE7 rules here */
}
CSS对浏览器器的兼容性存在很高的价值，通常情形下IE和Firefox存在很大的解析差别，这里先容一下兼容要点。
常见兼容问题：
1.DOCTYPE 影响 CSS 处理
2,CSS中清除浮动方法.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增添 height 和 width, 但 IE 不会, 故须要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则疏忽, 可用 !important 为 FF 特殊设置款式
6.div 的垂直居中问题: vertical-align:middle; 将行距增长到和整个DIV一样高 line-height:200px; 而后插入文字，就垂直居中了。毛病是要把持内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背风景，需设置 display: block, 同时设置 float: left 保障不换行。参照 menubar, 给 a 和 menubar 设置高度是为了防止底边显示错位, 若不设 height, 能够在 menubar 中插入一个空格。
9.在mozilla firefox跟IE中的BOX模型说明不一致导致相差2px解决方式：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别,CSS中水平居中和垂直居中的几种方法，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
反复定义的话依照最后一个来履行，所以不可以只写margin:XXpx!important;
10.IE5 和IE6的BOX解释不一致
IE5下
之间加上
就能解决大部门问题
注意事项：
1、float的div必定要闭合,CSS中有序列表的一些特殊代码形式。
例如：(其中floatA、floatB的属性已经设置为float:left;)
这里的NOTfloatC并不愿望持续平移，而是盼望往下排。
这段代码在IE中毫无问题，问题出在FF。起因是NOTfloatC并非float标签，必须将float标签闭合。
在
这个div一定要注意申明地位，一定要放在最适当的地方，而且必需与两个具备float属性的div同级，之间不能存在嵌套关系，否则会产生异样。
并且将clear这种样式定义为为如下即可：
3、关于容器的包涵关联
许多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很轻易呈现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
4、对于高度的问题
假如是动态地增加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（仿佛有时候不会自动往下撑开，不晓得详细怎么回事）
程序代码 <#div class="clear"></#div>
(责任编辑：网站建设)
CSS书写顺序建议及CSS HACK(FF&IE兼容)相关文章