您的位置：首页 > Web前端 > CSS

DIV+CSS浏览器兼容研究2

2010-04-02 23:52 295 查看

[转载,存档,备查]

由于浏览器之间存在兼容性问题，在制作网页的时候，为了使页面能在不同浏览器中显示相对一致；所以总结了几个浏览器之间的Hack和在浏览器兼容问题上的一些相关注意事项。现在浏览器基本需要兼容IE6；IE7；IE8；FF。

第一节 CSS HACK 汇总速查一览

浏览器	Hack(不支持的为红色)
IE6	“*” “_” “\9” “!important”
IE7	“*“ “_” “\9” “!important”
IE8	“*“ “_” “\9” “!important”
FF	“*” “_” “\9” “!important”

比如:

.main{

background-color: #CC00FF; /*所有浏览器都会显示为紫色*/---------ALL

background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/------------IE8

*background-color: #0066FF; /*IE6、IE7会变为蓝色*/-------------------IE7

_background-color: #009933; /*IE6会变为绿色*/--------------------------IE6

background-color: #000000!important;}/*FF会变为黑色*/---------------------------FF

第二节常见兼容问题整理 2.1 DOCTYPE 影响 CSS 处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-Frameset.dtd">

Transitional类型：是指一种过渡类型，使用这种类型浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。这种是现在通用的方法，用Dreamweaver创建网页时默认就是这种类型。

Strict类型：严格类型，使用时浏览器将相对严格，不允许使用任何表现形式的标识和属性，如在元素中直接使用bgcolor背景色属性等。

Frameset类型：框架页类型，如果网页使用了框架结构，就有必要使用这样的文档声明。

2.2 编码差异导致IE6不能正常解析CSS文件网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。IE6 的人还是不少。因此这个问题需要解决：

方法一：把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。

方法二：去掉 CSS、JS 中的中文注释，或者改为英文。

上文为IE6因为编码问题无法正确解析CSS文件

2.3 FORM标签在IE自动增加MARGIN边距这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在CSS中指定margin和 padding,针对上面两个问题,CSS中一般首先都使用这样的样式form{margin:0;padding:0;}

2.4 UL标签 UL标签在Mozilla中默认是有padding值的,而在IE中只有margin有值；

所以先定义 ul{margin:0;padding:0;}

2.4 MARGIN加倍的问题置为float的div在IE下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline；例如：

<div id="imfloat"></div>相应的CSS为

#imfloat{

float:left;

margin:5px; /*IE下理解为10px*/

display:inline; /*IE下再理解为5px*/ }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航