div+css兼容性解决方案.docx

div+css兼容性解决方案.docx

《div+css兼容性解决方案.docx》由会员分享，可在线阅读，更多相关《div+css兼容性解决方案.docx（11页珍藏版）》请在冰豆网上搜索。

div+css兼容性解决方案

div+css兼容性问题全解

1、div+css如何使网站兼容不同字体

使用utf-8内码进行编写

（右键-编码-选择一种其它国家的编码-查看效果）

asp代码如下:

<%

functionchinese2unicode（Str）

dimi

dimStr_one

dimStr_unicode

fori=1tolen（Str）

Str_one=Mid（Str,i,1）

Str_unicode=Str_unicode&chr（38）

Str_unicode=Str_unicode&chr（35）

Str_unicode=Str_unicode&chr（120）

Str_unicode=Str_unicode&Hex（ascw（Str_one））

Str_unicode=Str_unicode&chr（59）

next

Response.WriteStr_unicode

endfunction

%>

使用方法:

<%=chinese2unicode（"显示的内容"）%>

2、关于div+css兼容IE和firefox的问题

好不容易建立的div+css网页完全符合W3C标准。

在ie7下显示非常完美，用firefox一测试，乖乖一探糊涂惨不忍睹。

经过一番研究发现兼容很

简单。

1、增加div{overflow:

hidden;},目的就是让div自动适应内容高度

2、横排的div外套div

另外设定

ul{

margin:

0px;

padding:

0px;

}

是消除li前面的空格

3、div+css兼容性问题

CSS兼容要点：

DOCTYPE影响CSS处理

FF:

div设置margin-left,margin-right为auto时已经居中,IE不行

FF:

body设置text-align时,div需要设置margin:

auto（主要是margin-left,margin-right）方可居中

FF:

设置padding后,div会增加height和width,但IE不会,故需要用!

important多设一个height和width

FF:

支持!

important,IE则忽略,可用!

important为FF特别设置样式

div的垂直居中问题:

vertical-align:

middle;将行距增加到和整个DIV一样高line-height:

200px;然后插入文字，就垂直居中了。

缺点是

要控制内容不要换行

cursor:

pointer可以同时在IEFF中显示游标手指状，hand仅IE可以

FF:

链接加边框和背景色，需设置display:

block,同时设置float:

left保证不换行。

参照menubar,给a和menubar设置高度是为了

避免底边显示错位,若不设height,可以在menubar中插入一个空格XHTML+CSS兼容性解决方案小集

使用XHTML+CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面。

1.在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：

divcssxhtmlxmlExampleSourceCodeExampleSourceCode

div{margin:

30px!

important;margin:

28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!

important这个属性IE不能识别，但别的浏览器可以识别。

所以在IE下其实解释成这样

：

divcssxhtmlxmlExampleSourceCodeExampleSourceCode

div{maring:

30px;margin:

28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:

XXpx!

important;

2.IE5和IE6的BOX解释不一致IE5下div{width:

300px;margin:

010px010px;}div的宽度会被解释为300px-10px（右填充）-10px（左填充）最终

div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px（右填充）+10px（左填充）=320px来计算的。

这时我们可以做如下修改：

divcssxhtmlxmlExampleSourceCodeExampleSourceCode

div{width:

300px!

important;width/**/:

340px;margin:

010px010px}

关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！

：

）

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

divcssxhtmlxmlExampleSourceCodeExampleSourceCode

ul{margin:

0;padding:

0;}

就能解决大部分问题

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为

divcssxhtmlxmlExampleSourceCodeExampleSourceCode

4、div+css兼容问题解决方案（IE5/5.5/6/7/FF）

之前找了几个不同版本的可独立运行的IE浏览器，正好拿来试试页面的兼容性问题。

不试不知道，在IE6和FF中没问题的页面在IE5和IE5.5中乱

成一团，一直听说IE5是WEB标准制作的一个“钉子户”，现在不得不相信了。

既然有问题，那就找找解决的方法咯，在网上一搜，相关的文章还是不少的，觉得最直接的方法还是“IE条件注释”，很方便的就能为IE的不

同版本写样式。

但这样就得为每个版本写一个样式，不利于文件的优化。

找了一些相关的CSSHACK后，觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的，经过测试，终于找到了一个不错的方法，下面我们来看看

怎么实现：

大家都知道用!

important声明可以提升指定样式规则的应用优先权，如下面的例子：

E1{

background-color:

red!

important;/*提升优先权*/

background-color:

blue;

}

但这样写在IE中会有个问题，看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》，你会知道在IE6和FF中用!

important声明

可以提高优先级别，但在IE6中的!

important声明并不是绝对的，它会被之后的同名属性定义所替换。

也就是说在上面的例子中，IE6所应用的

是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。

根据这一点，我们就可以把FF和IE的样式分离开。

OK，解决了FF和IE的问题，现在来解决IE自己的问题。

看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发，使用“＞”IE是否真的可以认得？

我们来看个例子：

E1{

background-color:

red;

＞background-color:

blue;

}

在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“＞”，则应该得到的蓝色的背景

，因此可以知道“＞”只有IE可以识别，这点是很重要的哦！

在后面大家就会知道了。

（注：

我测试过其它的一些符号，如“~”、“`”、“

＜”等，都只有IE可以识别，在此为了感谢嘟嘟，推荐使用“＞”）

我们再来看个例子：

E1{

＞/*IEonly*/background-color:

black;

＞/*IEonly*/background-color/*IE5.5*/:

green;

}

这个例子在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。

这就说明了第二句定义只有IE5.5能识别

，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。

到此我们已经把FF、IE5.5、IE6分离

出来了，那IE5呢？

其实现在我们只要把IE5跟IE6分开就OK了，来看看例子：

E1{

＞/*IEonly*/background-color:

red;/*IE5*/

}

E1/*IE5.5+*/{

＞/*IEonly*/background-color:

black;

}

这里我们又用到一个HACK，就是“E1/**/{}”，这个定义在IE5以上的版本才能识别出来。

这个例子得到的结果是，在IE5中的背景色为红色；

在IE5以上版本中得到的是黑色背景。

终于把不同版本的浏览器都分离出来了，这样我们就可以为不同的浏览器定义不同的样式了。

来看个完整的例子：

E1{

width:

500px;

height:

50px;

background-color:

red!

important;/*FF*/

background-color:

blue;/*IE5*/

text-align:

center;

}

E1/*IE5.5+*/{

＞/*IEonly*/background-color:

black;/*IE6*/

＞/*IEonly*/background-color/*IE5.5*/:

green;

}

需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。

对于IE的定义在属性前要加“＞”，因为

“E1/**/{}”这个HACK在FF中可以识别。

也许你会想，上面的例子不是可以写成：

E1{

width:

500px;

height:

50px;

background-color:

red;/*FF*/

＞background-color:

blue;/*IE5*/

text-align:

center;

}

E1/*IE5.5+*/{

＞/*IEonly*/background-color:

black;/*IE6*/

＞/*IEonly*/background-color/*IE5.5*/:

green;

}

这样不就又可以省下几个字节？

是没错，可是HACK不是标准，如果滥用HACK，那只会离标准越来越远！

6、div+css实现Firefox和IE6兼容的垂直居中

Firefox中使用display:

table-cell;vertical-align:

middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。

为

了实现Firefox和IE6兼容的垂直居中，还需要借助于!

important标记。

Firefox支持!

important标记，而IE6忽略!

important标记，因此可以使

用!

important标记区别Firefox和IE6。

[示例代码]

table-cell;vertical-align:

middle;height:

200px;border:

1pxsolidred;">

垂直居中，Firefoxonly

垂直居中，Firefoxonly

垂直居中，Firefoxonly