CSS书写顺序建议及CSS HACK(FF&IE兼容)

网络整理 - 07-27

//显示属性
display
position
float
clear
cursor


//自身属性
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align


/*文字*/
color
font
content

/*边框背景
boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便。*/
border
background
}

程序代码:

.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 */
}

可简单解决IE与FF之间的兼容问题(保持FF,IE7,IE的顺序),但这种方式貌似对加载有一定的影响 !  

 程序代码

div{width:300px;margin:0 10px 0 10px;}


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不支持,如果有人理解的话,请告诉我一声,谢了!:)

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

 程序代码

ul{margin:0;padding:0;}


就能解决大部分问题

注意事项:

1、float的div一定要闭合。

例如:(其中floatA、floatB的属性已经设置为float:left;)

 程序代码

<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>


这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。

 程序代码

<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>


之间加上

 程序代码

<#div class="clear"></#div>


这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:

 程序代码

.clear{
clear:both;}

  此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:

 程序代码

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}



2、margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:

<#div id="imfloat"></#div>


相应的css为

 程序代码

#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}



3、关于容器的包涵关系

很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题

如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)