关于前端兼容性的那些问题

一，写在前面

关于市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。每个浏览器又有不同的版本，不同浏览器不同版本因为浏览器本身渲染引擎的不同，在对于w3c标准的支持版本不同造就了一大堆的兼用性问题。

二，关于不同的浏览器的内核

先是五大浏览器

浏览器	内核
IE浏览器	Trident内核
Chrome浏览器	Webkit内核，现在是Blink内核
Firefox浏览器	Firefox内核
Safari浏览器	Webkit内核
Opera浏览器	Webkit内核，现在是Blink内核

然后是市场的其他的热门，但非主流的浏览器

浏览器	内核
360浏览器	IE+Chrome双内核
猎豹浏览器	IE+Chrome双内核
百度浏览器	IE内核
QQ浏览器	Trident（兼容模式）+Webkit（高速模式）

三，关于常见的兼容性问题

1，对于不同浏览器的外边距和内边距问题

*{
			padding: 0;
			margin: 0;s
		}

2，当标签的高度设置小于10px，IE浏览器低版本会超出自己的高度

//可以通过给设置overflow属性，隐藏超出的部分
overflow: hidden;

3，图片默认有间距

//可以使用弹性盒子布局，不过IE低版本要做一些兼容性的处理
display: flex;

4，两个块级元素处理

//通过给父元素设置隐藏处理，子元素进行相对定位处理
overflow:auto
position:relative

5，ul和ol列表缩进问题

//因为对于一些浏览器设置margin和padding可以消除列表的上下缩进的问题，同时也要消除圆点的
li{
			list-style: none;
			margin: 0;
			padding: 0;
		}

6，元素水平居中问题

//给父集去设置，可以消除这个问题
text-align:center; 

7，内容超过长度后以省略号显示

white-space:nowrap; 
text-overflow:ellipsis; 
overflow:ellipsis; 

最后css兼用性问题，可以自己写一个reset重置样式只解决了一些比较简单的样式问题，而类似于双边距、最小高度等问题，还需要我们在各自的项目中进行对应的处理。