前端开发中浏览器兼容问题总结

PC端兼容问题及解决方案

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. 清除浮动
   不想受到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 + 子marign
   IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
   FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面
7. 列表类
   1. ul标签在FF中默认是有 padding值的，而在IE中只有margin有值
      先定义 ul {margin:0;padding:0;}
   2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}
8. 背景、图片类
   background显示问题：全部注意补齐 width，height 属性
   背景透明问题：
   IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
   IE: filter: alpha(opacity=10);
   FF: opacity:0.6;
   FF: -moz-opacity:0.10;
   最好两个都写，并将opacity属性放在下面
9. iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
   iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：
   【1】去掉背景色：filter:Chroma(Color=white);
   举例：

   <iframe width="100%" height