飞龙博客

feilong.org

网页div css设计网页浏览器不兼容原因及解决

feilong.org 修订于2008-06-19 02:14:00 416 次浏览

浏览器之间的css互相不兼容,相信网页制作人员都会深恶痛绝。计浏览器不兼容原因及解决方法,飞龙整理一些和大家一起学习。

1.文字大小不兼容。
同样14px的宋体字,ie下实际占高16px,下留白3px,firefox下实际占高17px,上留白1px,下留白3px。
文字大小不兼容解决方案:给所有文字设定通用line-height值

2.div高度不兼容:
firefox下div容器定义height后,div不会因为内容超出height而撑大,而i6e下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

div高度不兼容解决方案:
如果设置高度,需要同时把内容物高度限定,也就是溢出隐藏处理:overflow:hidden;或者当需要随着内容自适应高度,但又想div有一个最小的高度时候,像飞龙这样做
min-height: 1400px;/* for ie7 firefox opera*/
max-height:none;/* for ie7 firefox opera*/
_height: 1400px;/* only for ie6*/

3.div宽度不兼容:
如果div容器设定float浮动但没设定宽度,那么也会出现ie6和firefox的不兼容。firefox下内容会撑开容器渗入它前面的div,ie6下该div内容折行而不是我们想象的与同级div在同一行。

div宽度不兼容解决方案:浮动div容器一般需定义width。

4.div浮动不兼容:飞龙发现当前面div有左浮动和右浮动,下面div就会受他们影响也有浮动。ie也许不用加清除,但firefox下不清除浮动是不行的。
div浮动不兼容解决方案:给下面的div设定清除 clear:both;

5. 最被痛恨的double-margin不兼容。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。
解决方案,给浮动容器定义display:inline。

6. mirror margin不兼容。当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px.padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。
解决方案:外层元素设定border 或设定float。

7.吞吃现象。还是ie6,上下两个div,上面div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。飞龙没明白这啥意思。
解决方案:使用zoom:1.这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug。多出来的一只猪,这是前人总结这个bug使用的比喻。ie6下这个bug,大家会在页面看到猪字出现两遍,重复内容量因注释的多少而变。解决方案:用"<!-[if !IE]> picRotate start <![endif]->"方法写注释。

9.<li/>里加 float <div/> 。这是一个典型的,棘手的兼容问题,希望引起大家重视。,给li不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑。在《ul使用心得》一文里有相关成果,却没给出问题解决过程。

10.使用了"float:left;display:inline"的ul的奇怪表现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline,这也是我的css体系里的重要一环,在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。

11.img下的留白,大家看这段代码有啥问题:
<div>
<img src="" mce_src="" />
</div>

把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
<div>
<img src="" mce_src="" /></div>
后面两个标签要紧挨着.ie7下这个bug 依然存在。解决方案:给img设定 display:block。

12.失去line-height。<div style="line-height:20px"><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了,原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。

引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。

13.链接的hover状态.a:hover img{width:300px} 我们想让鼠标hover时,链接里包含图片宽度变化,可惜在ie6下无效,ie7、ff下有效。

14.非链接的hover状态.div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。

15.block化的a链接,其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,firefox、opera下正常。

上面的诸多问题如果你掌握了其中奥妙,90%的不兼容问题不需要另起css hack的。

16.无法彻底清除的float。如果让ul下的li具有了float属性,如何clear浮动的li呢?<ul><li class="c"></li></ul> 或者 <ul><li><div>class="c"></div></li></ul> 或者 <ul><li></li><div>class="c"></div></ul> 或者 <ul><li></li></ul><div>class="c"></div> 或者上述的组合?这个问题,我无法给出解答。

下面有个例子与此相关
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<style type=text/css>
.c{clear:both;overflow:hidden;+overflow:visible}
.bd{border:1px solid red}

ul.ex{list-style:none;}
ul.ex li{float:left;border:1px solid green;}
</style>
<ul class=ex>
<li>sfsdfsfdf</li>
<li>sfsdfsfdf</li>
</ul>
<div class=c></div>
<div class=bd style=margin-top:19px>sfsdfsfdf</div>

请在ie下 测试,仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了?要素:doctype必须有,ie6、ie7下margin-top:19px还好好的,margin-top:20px 就出问题了,无法解释...大家还可以将 clear 层换不同的位置测试。

解决方案:给ul 属性zoom:1 (给li 加zoom:1 没用)

引申:clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和opera下失去margin效果,ie下某些margin值也会失效

<div style="background:red;float:left;">dd</div>
<div style="clear:both;margin-top:18px;background:green">ff</div>

17. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。
解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

18. ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度.float元素如果作为布局用或复杂的容器,都要给个宽度的。

19. ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

20. ie6下的bug,<head></head>内有<base target="_blank"/>的情况下,position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

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

22. Padding vs. Margin
对于浏览器来说,Margin是兼容性最差的一个属性。因此只要条件允许,尽可能的使用Padding属性。

博主:飞龙.org
转自:http://www.51flash.cn/?p=532
链接:http://feilong.org/ie-firefox-css-diference
网络资料,朋友共享,http://feilong.org 可加入收藏夹。

更新网址:https://feilong.org/ie-firefox-css-diference
最初发布:20080619 02:14:00 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认