button 兼容性问题

改文章是基于 谷歌浏览器，360浏览器（兼容模式），火狐浏览器，和QQ浏览器的极速模式下 兼容性问题

首先我们先了解下  各个浏览器的内核

谷歌浏览器：Google Chrome，谷歌浏览器之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳，自己开创了新的blink内核，这个内核也在被欧鹏（opera浏览器）共同采用和开发；

360极速浏览器：基于谷歌内核和IE内核 （兼容模式是）

火狐浏览器：Mozilla Firefox ，内核是Gecko；

QQ浏览器：普通模式（IE：Trident）和极速模式（webkit） 

首先先看一张图

从左道友依次是谷歌浏览器 QQ浏览器极速模式（webbkit） 360 （兼容模式，IE：Trident） 火狐浏览器（Gecko）

从图片上我们不难看出  360 和火狐的 下边框和右边框有明显的阴影  而且文字的后两个的文字明显是下垂的 还有button的高度也不一样，还有背景颜色感觉有的深有的浅，而且默认情况下button的高度不同

这都是因为浏览器是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

这个问题主要是各个浏览器内核的的内外边距不同

首先我们可以先使用 css 里面的 * 将所有元素的内边距和外边距 以及背景颜色 边框等都去掉

*{
  margin: 0px;
  font-size: 0px;
  border: none;
  background: none;
  padding: 0px;
}

然后重现定义button的内边距，边框字体大小等

button{
  cursor: default;
  border: 1px solid red;
  font-size: 14px;
  text-align: center;
  padding:2px;
}

这个时候检查样式 会发现  button 的高度宽度 都是相同的  但是有个问题是360 兼容情况下 他的上左边框显示不出来

还有如果文字是小写的情况下 文字不居中    中文文字和 英文大写情况下都默认居中  这个问题也不知道是怎么回事，但是我看了下各个ui组件中都有这个问题  可能默认小写 就这样吧  

以上能解决大部分的button 兼容性问题   360兼容模式下的内嵌问题和英文小写不居中的问题  欢迎各位大佬来解惑，不胜感激