Browser Hack整理
浏览器的兼容问题
1.浏览器内核：
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Safari ( WebKit )
Google Chrome ( WebKit )
如何解决浏览器的兼容性
在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，这样就解决了ie7、ie8兼容问题。现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题，我们需要使用CSS Hack来解决该问题。代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>浏览器兼容性问题</title>
<style type="text/css">
.t1
{
color:#000000; /* 所有浏览器都支持 此处填写Firefox的css*/
*color:#0000FF; /* ie6 id7 支持 此处填写ie7的css*/
_color:#66CCCC; /* ie6支持 此处填写ie6的css*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{ .t1{color:#9900FF}} /* oprea支持 此处填写oprea的css*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.t1{color:#336600}/* Chrome、Safari支持 此处填写Chrome的css*/
}
</style>
</head>
<body>
<div class="t1">ff、ie8、ie7、ie6、oprea、Safari兼容性css 书写模式<br>
.t1{
color:#000000; /* 所有浏览器都支持 此处填写Firefox的css**/<br>
*color:#0000FF; /* ie6 id7 支持 此处填写ie7的css*/<br>
_color:#66CCCC; /* ie6支持 此处填写ie6的css*/<br>
}<br>
/* oprea支持此处填写oprea的css*/<br>
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)<br>
{ .t1{color:#CC66FF}}<br>
/* Chrome、Safari支持 此处填写Chrome的css*/<br>
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.t1{color:#336600}}
}
</div>
</div>
</body>
</html>
-
默认的内外边距不同
问题：
各个浏览器默认的内外边距不同
解决：
*{margin:0;padding:0;} -
水平居中的问题
问题：
设置 text-align: center
ie6-7文本居中，嵌套的块元素也会居中
ff /opera /safari /ie8文本会居中，嵌套块不会居中
解决：
块元素设置
1、margin-left:auto;margin-right:auto
2、margin:0 auto;
3、<div align=”center”></div> -
垂直居中的问题
问题：
在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle1，但是文本框的内容不会垂直居中
解决：
给容器设置一个与其高度相同的行高
line-height:与容器的height一样 -
关于高度问题
问题：
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框
解决：
1.设置overflow:hidden;
2.高度自增height:auto!important;height:100px; -
IE6 最小高度(宽度)的问题
问题：
ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
解决：
使用ie6不支持但其余浏览器支持的属性!important。
设置属性min-height:200px; height:auto !important; height:200px; -
td高度的问题
问题：
table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
解决：
设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示 -
div嵌套p时，出现空白行
问题：
div中显示<p>文本</p>，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
