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

  • 居中问题
    div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;
  • 高度问题
    两上下排列或嵌套的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;
    	}
    
  • 清除浮动
    不想受到float浮动的,可在div中写入clear:both;
  • IE浮动 margin产生的双倍距离
    #box {
    	float:left;
    	width:100px;
    	margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
    	display:inline; //使浮动忽略
    }
    
  • padding问题
    FF设置 padding 后,div会增加 height 和 width,但IE不会 (* 标准的 XHTML1.0 定义 dtd 好像一致了)高度控制恰当,或尝试使用 height:100%;宽度减少使用 padding但根据实际经验,一般FF和IE的 padding 不会有太大区别,div 的实际宽 = width + padding ,所以div写全 width 和 padding,width 用实际想要的宽减去 padding 定义。
  • 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 外面
  • 列表类
    1. ul标签在FF中默认是有 padding值的,而在IE中只有margin有值
      先定义 ul {margin:0;padding:0;}
    2. ul和ol列表缩进问题消除ul、ol等列表的缩进时,样式应写成: {list-style:none;margin:0px;padding:0px;}
  • 背景、图片类
    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属性放在下面
  • iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
    iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。内嵌文档时一个完整的页面,有HTML,BODY等属性。这样遇到了一个问题,如果样式表中对BODY定义过背景色/背景图片,那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片:
    【1】去掉背景色:filter:Chroma(Color=white);
    举例:
    <iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
    
    【2】去掉背景图片:
    举例:
    <iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
    
    注意:内嵌页面同时也要增加BODY属性:
    <body bgcolor="transparent" style='background:transparent'>
    
  • web标准中无法设置IE浏览器滚动条颜色,使用以下方式
    body{
    	scrollbar-face-color:#f6f6f6; 
    	scrollbar-highlight-color:#fff; 
    	scrollbar-shadow-color:#eeeeee; 
    	scrollbar-3dlight-color:#eeeeee; 
    	scrollbar-arrow-color:#000; 
    	scrollbar-track-color:#fff; 
    	scrollbar-darkshadow-color:#fff; 
    }
    // 解决办法是将body换成html
    
  • 火狐浏览器下文本无法撑开容器的高度
    标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
    div { 
    	height:auto!important; 
    	height:200px;
    	min-height:200px; 
    }
    
  • ie6下max/min-width/height实现
    ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.
  • 上一篇:cpp-tbox 之 RPC 通信服务


    下一篇:webpack 区分环境