页面设计

本文深入探讨了浏览器兼容性问题中常见的文字大小、div高度、宽度及浮动等不兼容现象,并提供了针对性的解决方案,旨在帮助前端开发者解决在不同浏览器下布局和样式的一致性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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. block化的a链接,其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,firefox、opera下正常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值