2018-11-22
兼容性一直都是前端工程师头疼的一个问题，也是前端面试常考的一个方面，今天看到一位前端程序员总结的一份很好的关于浏览器兼容性问题的文章，正好近群里有许多的需要面试伙伴，所以稍微挑了十个常用的浏览器兼容问题分享出来，希望大家面试顺利！
前端兼容性问题一：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%，除非设定一个宽度
，
，
