瀏覽器的兼容問題
1.瀏覽器內(nèi)核：
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Safari ( WebKit )
Google Chrome ( WebKit )
如何解決瀏覽器的兼容性
在head標(biāo)簽中加入meta 類型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />蜓氨，這樣就解決了ie7队伟、ie8兼容問題。現(xiàn)在剩下ie6嗜侮、ie7港令、Firefox锈颗、Chrome(Safari與Chrome使用同一內(nèi)核)、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>
默認(rèn)的內(nèi)外邊距不同
問題：
各個(gè)瀏覽器默認(rèn)的內(nèi)外邊距不同
解決：
*{margin:0;padding:0;}水平居中的問題
問題：
設(shè)置 text-align: center
ie6-7文本居中那婉，嵌套的塊元素也會(huì)居中
ff /opera /safari /ie8文本會(huì)居中板甘，嵌套塊不會(huì)居中
解決：
塊元素設(shè)置
1详炬、margin-left:auto;margin-right:auto
2、margin:0 auto;
3呛谜、<div align=”center”></div>垂直居中的問題
問題：
在瀏覽器中 想要垂直居中在跳，設(shè)置vertical-align:middle; 不起作用隐岛。例如：ie6下文本與文本輸入框?qū)Σ积R，需設(shè)置vertical-align:middle1聚凹，但是文本框的內(nèi)容不會(huì)垂直居中
解決：
給容器設(shè)置一個(gè)與其高度相同的行高
line-height:與容器的height一樣關(guān)于高度問題
問題：
如果是動(dòng)態(tài)地添加內(nèi)容割坠，高度最好不要定義。瀏覽器可以自動(dòng)伸縮韭脊，然而如果是靜態(tài)的內(nèi)容，高度最好定好沪羔。
如果設(shè)定了高度饥伊，內(nèi)容過多時(shí)蔫饰，ie6下會(huì)自動(dòng)增加高度、其他瀏覽器會(huì)超出邊框
解決：
1.設(shè)置overflow:hidden;
2.高度自增height:auto!important;height:100px;IE6 最小高度(寬度)的問題
問題：
ie6不支持min-height篓吁、min-width屬性茫因，默認(rèn)height是最小高度杖剪，width是最小寬度。
解決：
使用ie6不支持但其余瀏覽器支持的屬性!important盛嘿。
設(shè)置屬性min-height:200px; height:auto !important; height:200px;td高度的問題
問題：
table中td的寬度都不包含border的寬度洛巢，但是oprea和ff中td的高度包含了border的高度
解決：
設(shè)置line-height和height一樣次兆。在ie中如果td中的沒有內(nèi)容，那么border將不會(huì)顯示div嵌套p時(shí)芥炭，出現(xiàn)空白行
問題：
div中顯示<p>文本</p>漓库，ff园蝠、oprea、Chrome：top和bottom都會(huì)出現(xiàn)空白行砰琢，但是在ie下不會(huì)出現(xiàn)空白行蘸嘶。
解決：
設(shè)置p的margin:0px陪汽，再設(shè)置div的padding-top和padding-bottom
引用自：https://www.cnblogs.com/lijingsi9210/p/6014161.html
https://www.cnblogs.com/sure2016/p/5895154.html
