piczoom兼容性问题_关于各大浏览器的兼容问题解决方案大全

案给内层相对层float属性。

14.width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。

15.有时候加上div{overflow:hidden}这个样式那三个浏览器就会相同了

16.使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题

我们经常遇到一个容器外面套一个边框，边框高度随容器高度变化，但是当边框内容器设置了浮动属性后，外框就不跟随变化，这时就需要清除浮动。给外边框容器加上overflow:auto的属性，可以解决IE7和FF下的清除浮动问题，但是IE6下不生效，我们需要使用IE的一个私有属性zoom使IE5.5+的浏览器达到外框跟随变化的效果。

需要注意的几个细节问题，例如我们建立一个样式为text的容器，宽200象素，高度自适应，外面包一个样式为content的10象素的外框。(如图1)

图1

代码如下：

以下是引用片段：

&ltstyle type="text/css"&gt

.content{ border:10px solid #F00;}

.text{ width:200px; height:300px; background:#000;}

&lt/style&gt

&ltbody bgcolor="#FFFFFF"&gt

&ltdiv class="content"&gt

&ltdiv class="text"&gt&lt/div&gt

&lt/div&gt

&lt/body&gt

如果我们为text容器设置了左浮动的属性，并将content容器定义了200象素的宽，就需要为content容器增加overflow:auto属性，以清除text容器的浮动。否则FF下则会出现问题。(如图2)

图2

代码如下：

以下是引用片段：

&ltstyle type="text/css"&gt

.content{ border:10px solid #F00; width:200px; overflow:auto;}

.text{ width:200px; height:300px; background:#000; float:left;}

&lt/style&gt

&ltbody bgcolor="#FFFFFF"&gt

&ltdiv class="content"&gt

&ltdiv class="text"&gt&lt/div&gt

&lt/div&gt

&lt/body&gt

17. 使用链接样式模拟图片热区

如果为一副不规则图片添加区域链接，很多朋友都会考虑使用Dreamweaver的热区功能，其实如果需要添加链接的区域是规则的矩形形状，我们可以使用样式表控制链接的样式来模拟热区的效果，代码少，易于维护和修改。

例如我们要在一张400×100的背景图片上建立一个100×50大小和200×80大小的矩形热区。(如图3)

图3

代码如下：

以下是引用片段：

&ltstyle type="text/css"&gt

#banner{ width:400px; height:100px; background:#959595;}

#banner a{ float:left;}

#banner a.link1{ width:100px; height:50px; background#:F00; margin:20px 0 0 20px;}

#banner a.link2{ width:200px; height:0px; background:#F00; margin:10px 0 0 50px;}

&lt/style&gt

&ltbody bgcolor="#FFFFFF"&gt

&ltdiv id="banner"&gt

&lta href="#" class="link1"&gt&lt/a&gt

&lta href="#" class="link2"&gt&lt/a&gt

&lt/div&gt

&lt/