2023年6月21日发(作者：)

【web前端开发】浏览器兼容性处理⼤全【web前端开发】浏览器兼容性处理⼤全1、居中问题div⾥的内容，IE默认为居中，⽽FF默认为左对齐，可以尝试增加代码margin: 0 auto;2、⾼度问题两上下排列或嵌套的div，上⾯的div设置⾼度(height)，如果div⾥的实际内容⼤于所设⾼度，在FF中会出现两个div重叠的现象；但在IE中，下⾯的div会⾃动给上⾯的div让出空间所以为避免出现层的重叠，⾼度⼀定要控制恰当，或者⼲脆不写⾼度，让他⾃动调节，⽐较好的⽅法是 height:100%;但当这个div⾥⾯⼀级的元素都float了的时候，则需要在div块的最后，闭和前加⼀个沉底的空div，对应CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}3、clear:both;不想受到float浮动的，就在div中写⼊clear:both;4、IE浮动 margin产⽣的双倍距离#box {float:left;width:100px;margin:0 0 0 100px; //这种情况之下IE会产⽣200px的距离display:inline; //使浮动忽略}5、padding问题FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像⼀致了）⾼度控制恰当，或尝试使⽤height:100%;宽度减少使⽤ padding但根据实际经验，⼀般FF和IE的 padding 不会有太⼤区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width ⽤实际想要的宽减去 padding 定义。6、div嵌套时 y轴上 padding和 marign的问题FF⾥ y 轴上 ⼦div 到 ⽗div 的距离为 ⽗padding + ⼦marignIE⾥ y 轴上 ⼦div 到 ⽗div 的距离为 ⽗padding 和 ⼦marign ⾥⼤的⼀个FF⾥ y 轴上 ⽗padding=0 且 border=0 时，⼦div 到 ⽗div 的距离为0，⼦marign 作⽤到 ⽗div 外⾯7、padding，marign，height，width的傻⽠式解决技巧注意是技巧，不是⽅法：写好标准头⾼尽量⽤padding，慎⽤margin，height尽量补上100%，⽗级height有定值⼦级height不⽤100%，⼦级全为浮动时底部补个空clear:both的div宽尽量⽤margin，慎⽤padding，width算准实际要的减去padding8、列表类1. ul标签在FF中默认是有 padding值的，⽽在IE中只有margin有值先定义 ul {margin:0;padding:0;}2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}9、显⽰类（display:block,inline）1. display:block,inline两个元素display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同⼀⾏排列的的效果display:table; //for FF,模拟table的效果display:block 块元素，元素的特点是：总是在新⾏上开始；⾼度，⾏⾼以及顶和底边距都可控制；宽度缺省是它的容器的100%，除⾮设定⼀个宽度

，

，

，
，