您现在的位置: 365建站网 > 365学习 > CSS书写顺序建议及CSS HACK(FF&IE兼容)

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

文章来源:365jz.com     点击数:1531    更新时间:2010-01-22 21:04   参与评论

//显示属性
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的顺序),但这种方式貌似对加载有一定的影响 !

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,也增加了对一些选择符的支持,所以现在诸如 *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。其它浏览器不识别。
html/**/ >body   select {……}
这句与上一句的作用相同。
用法:
*html #box{…}


仅IE6不识别
#box { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。



仅IE6与IE5不识别
#box/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。


仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法
selct {width:IE5.x宽度; voice-family :”\”}\””; 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兼容随记

[NextPage]

  CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。

常见兼容问题:


1.DOCTYPE 影响 CSS 处理

2.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不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

10.IE5 和IE6的BOX解释不一致
IE5下

 

 

程序代码 程序代码
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、关于高度的问题

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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (1531人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------