Browser Hack整理

浏览器的兼容问题

1.浏览器内核：
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Safari ( WebKit )
Google Chrome ( WebKit )

如何解决浏览器的兼容性
在head标签中加入meta 类型，这样就解决了ie7、ie8兼容问题。现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题，我们需要使用CSS Hack来解决该问题。代码如下所示：

ff、ie8、ie7、ie6、oprea、Safari兼容性css 书写模式

.t1{
       color:#000000; /* 所有浏览器都支持 此处填写Firefox的css**/

       *color:#0000FF; /* ie6 id7 支持 此处填写ie7的css*/

       _color:#66CCCC; /* ie6支持  此处填写ie6的css*/

}

/* oprea支持此处填写oprea的css*/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)

{ .t1{color:#CC66FF}}

/* Chrome、Safari支持 此处填写Chrome的css*/

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.t1{color:#336600}}
}

1. 默认的内外边距不同
   问题：
   各个浏览器默认的内外边距不同
   解决：
   *{margin:0;padding:0;}

2. 水平居中的问题
   问题：
   设置 text-align: center
   ie6-7文本居中，嵌套的块元素也会居中
   ff /opera /safari /ie8文本会居中，嵌套块不会居中
   解决：
   块元素设置
   1、margin-left:auto;margin-right:auto
   2、margin:0 auto;
   3、

3. 垂直居中的问题
   问题：
   在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle1，但是文本框的内容不会垂直居中
   解决：
   给容器设置一个与其高度相同的行高
   line-height:与容器的height一样

4. 关于高度问题
   问题：
   如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
   如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框
   解决：
   1.设置overflow:hidden;
   2.高度自增height:auto!important;height:100px;

5. IE6 最小高度(宽度)的问题
   问题：
   ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
   解决：
   使用ie6不支持但其余浏览器支持的属性!important。
   设置属性min-height:200px; height:auto !important; height:200px;

6. td高度的问题
   问题：
   table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
   解决：
   设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

7. div嵌套p时，出现空白行
   问题：
   div中显示

   文本

   ，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。
   解决：
   设置p的margin:0px，再设置div的padding-top和padding-bottom

引用自：https://www.cnblogs.com/lijingsi9210/p/6014161.html
https://www.cnblogs.com/sure2016/p/5895154.html