兼容性一直都是前端工程师最头疼的一个问题，也是前端面试最常考的一个方面，今天看到一位前端程序员总结的一份很好的关于浏览器兼容性问题的文章，正好最近群里有许多的需要面试伙伴，所以稍微挑了十个常用的浏览器兼容问题分享出来，希望大家面试顺利！

前端兼容性问题一：padding

在Firefox设置了 padding 一后，p会增加 height 和 width，但IE不会 。

解决方式：尝试使用 height:100%或者控制好高度;宽度减少使用 padding但根据实际经验，一般Firefox和IE的 padding 不会有太大区别，p 的实际宽 = width + padding ，所以p写全 width 和 padding，width 用实际想要的宽减去 padding 定义。

前端兼容性问题二：高度

两上下排列或嵌套的p，上面的p设置height，如果p里的实际内容大于所设高度，在Firefox中会出现两个p重叠的现象；在IE中，下面的p会自动给上面的p让出空间

解决方式：高度要控制恰当，比较好的方法是 height:100%;但当这个p里面一级的元素都float了的时候，则需要在p块的最后，闭和前加一个沉底的空p，对应CSS是：

.float_bottom

{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

前端兼容性问题三：IE浮动 margin产生的双倍距离

#box{
float:left;
wiadth:100px;
margin:0 0 0 100px;//这种情况之下IE会产生200px的距离
display:inline;//使浮动忽略

前端兼容性问题四：clear:both;

不想受到float浮动的，就在p中写入clear:both;

前端兼容性问题五：居中问题

p里的内容，IE默认为居中，而Firefox默认为左对齐，可以尝试增加代码margin: 0 auto;

前端兼容性问题六：列表类

·ul标签在FF中默认是有 padding值的，而在IE中只有margin有值先定义 ul {margin:0;padding:0;}

·ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成:{list-style:none;margin:0px;padding:0px;}

前端兼容性问题七：显示类（display:block,inline）

1. display:block,inline两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素，元素的特点是：

总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度

，

，

，

，

• 和

• 是块元素的例子
  
  display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。，，，，， 和 是 inline 元素的例子
  
  2.鼠标手指状显示
  
  全部用标准的写法 cursor: pointer;
  
  前端兼容性问题八:背景、图片类
  
  1. background显示问题
  
  全部注意补齐 width，height 属性
  
  2.背景透明问题
  
  IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
  
  IE: filter: alpha(opacity=10);
  
  Firefox: opacity:0.6;
  
  Firefox: -moz-opacity:0.10;
  
  最好两个都写，并将opacity属性放在下面
  
  前端兼容性问题九:min-height最小高度的实现（兼容IE6、IE7、Firefox）
  
  作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
  
  #mrjin {
     background: #ccc;
     min-height: 100px;
     height: auto !important;
     height: 100px;
     overflow: visible;
  }
  
  前端兼容性问题十：为什么web标准中无法设置IE浏览器滚动条颜色了？
  
  body {
     scrollbar-face-color: #f6f6f6;
     scrollbar-highlight-color: #fff;
     scrollbar-shadow-color: #eee;
     scrollbar-3dlight-color: #eee;
     scrollbar-arrow-color: #000;
     scrollbar-track-color: #fff;
     scrollbar-darkshadow-color: #fff;}
  
  原来样式设置：
  
  

  解决办法是将body换成html。

  
  

  本文来源于上海网站建设公司与上海网站设计制作公司-垒越科技上海公司！

  
  

• 上一篇：设计中搜索框设计的8个技巧
• 下一篇：品牌网站建设为什么只能选网站定制，而不能选模板？