css中一些兼容性问题和技巧
时间：2026-04-29
本文概括总结了一些web制作中css在各浏览器中不兼容的小问题。包括：一、设置float：left时父元素height不能自适应的兼容问题。二、当同时设置float：left和margin时IE6会产生双倍margin值。三、margin不能撑开height。四、margin-top失效。五、子元素设置margin-top作用于父元素。六、图片产生间距的问题。七、IE6不支持 min-height。八、透明度的问题。
一、设置float：left时父元素height不能自适应的兼容问题 代码：
<style type="text/css">
#box{ width:800px; border:5px #333333 solid;}
#left{ width:360px; background:#FF0000;height:250px; float:left;} #right{float:left; width:360px; background:#0000FF;height:250px;} </style> <body>
<div id="box"> <div id="left"></div> <div id="right"></div> </div> </body>
（1）在IE6和IE7中显示如下：
（2）在IE8和IE9 中显示如下：
(3)在firefox和opera中显示如下：
解决办法：在父元素中添加 overflow：hidden 代码如下：
<style type="text/css">
#box{ width:800px; border:5px #333333 solid;overflow;hidden} #left{ width:360px; background:#FF0000;height:250px; float:left;}
本文概括总结了一些web制作中css在各浏览器中不兼容的小问题。包括：一、设置float：left时父元素height不能自适应的兼容问题。二、当同时设置float：left和margin时IE6会产生双倍margin值。三、margin不能撑开height。四、margin-top失效。五、子元素设置margin-top作用于父元素。六、图片产生间距的问题。七、IE6不支持 min-height。八、透明度的问题。
#right{float:left; width:360px; background:#0000FF;height:250px;} </style>
修改后：IE、firefox、opera 中显示如下：
二、当同时设置float：left和margin时IE6会产生双倍margin值 代码如下：
<style type="text/css">
#box{ width:800px; border:5px #333333 solid; overflow:hidden}
#left{ width:360px; background:#FF0000;height:250px; float:left; margin:0px 20px;} #right{float:left; width:360px; background:#0000FF;height:250px; margin:0px 20px;} </style> </head> <body>
<div id="box"> <div id="left"></div> <div id="right"></div> </div> </body>
在IE6中显示如下：
在IE7、IE8、IE9、firefox、opera中显示如图：
解决方法：添加display：inline
修改后：IE、firefox、opera 中显示如下：
本文概括总结了一些web制作中css在各浏览器中不兼容的小问题。包括：一、设置float：left时父元素height不能自适应的兼容问题。二、当同时设置float：left和margin时IE6会产生双倍margin值。三、margin不能撑开height。四、margin-top失效。五、子元素设置margin-top作用于父元素。六、图片产生间距的问题。七、IE6不支持 min-height。八、透明度的问题。
三、margin不能撑开height 代码如下：
<style type="text/css">
#box {background-color:#eee; width:300px; }
#inbox{margin-top: 20px;margin-bottom: 20px; text-align:center } </style> <body>
<div id="box">
<div id="inbox">对象中的内容</div> </div> </body>
（1） IE6和IE7能够撑开，如图：
（2） IE8 、IE9、firefox、和opera不能撑开。如图：
解决办法一：在#inbox对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;} 代码如下：
<style type="text/css">
#box {background-color:#eee; width:300px; }
#inbox{margin-top: 20px;margin-bottom: 20px; text-align:center;} .hidden{height:0px;overflow:hidden} </style> <body>
<div id="box">
<div class="hidden"></div>
<div id="inbox">p对象中的内容</div> <div class="hidden"></div> </div> </body>
修改后: IE、firefox、opera 显示如图：
本文概括总结了一些web制作中css在各浏览器中不兼容的小问题。包括：一、设置float：left时父元素height不能自适应的兼容问题。二、当同时设置float：left和margin时IE6会产生双倍margin值。三、margin不能撑开height。四、margin-top失效。五、子元素设置margin-top作用于父元素。六、图片产生间距的问题。七、IE6不支持 min-height。八、透明度的问题。
解决方法二：为#box加上border属性 代码如下：
<style type="text/css">
#box {background-color:#eee; width:300px; border:1px #666666 solid } #inbox{margin-top: 20px;margin-bottom: 20px; text-align:center;} </style> <body>
<div id="box">
<div id="inbox">p对象中的内容</div> </div> </body>
修改后: IE、firefox、opera 显示如图：
四、margin-top失效 代码如下：
<style type="text/css"> <!-- * { margin:0; padding:0; }
.box1 { float:left; width:500px; height:100px; background:#999; }
.box2 { margin-top:20px; width:500px; height:50px; background:#000; color:#fff; clear:both; } -->
</style> <body> <div>
<div class="box1" >float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
本文概括总结了一些web制作中css在各浏览器中不 …… 此处隐藏：3095字，全部文档内容请下载后查看。喜欢就下载吧 ……
css中一些兼容性问题和技巧.doc
将本文的Word文档下载到电脑
上一篇：电视天气预报节目的制作与播出
下一篇：高考现代文阅读训练(十)
