【web前端開發】瀏覽器兼容性處理大全

時間 2019-11-11

原文原文鏈接

一、居中問題

div裏的內容，IE默認爲居中，而FF默認爲左對齊，能夠嘗試增長代碼margin: 0 auto;

二、高度問題

兩上下排列或嵌套的div，上面的div設置高度(height)，若是div裏的實際內容大於所設高度，在FF中會出現兩個div重疊的現象；但在IE中，下面的div會自動給上面的div讓出空間因此爲避免出現層的重疊，高度必定要控制恰當，或者乾脆不寫高度，讓他自動調節，比較好的方法是 height:100%;但當這個div裏面一級的元素都float了的時候，則須要在div塊的最後，閉和前加一個沉底的空div，對應CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

三、clear:both;

不想受到float浮動的，就在div中寫入clear:both;

四、IE浮動 margin產生的雙倍距離

#box {
float:left;
width:100px;
margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離
display:inline; //使浮動忽略
}

五、padding問題

FF設置 padding 後，div會增長 height 和 width，但IE不會（* 標準的 XHTML1.0 定義 dtd 好像一致了）高度控制恰當，或嘗試使用 height:100%;寬度減小使用 padding但根據實際經驗，通常FF和IE的 padding 不會有太大區別，div 的實際寬 = width + padding ，因此div寫全 width 和 padding，width 用實際想要的寬減去 padding 定義。

六、div嵌套時 y軸上 padding和 marign的問題

FF裏 y 軸上子div 到父div 的距離爲父padding + 子marign
IE裏 y 軸上子div 到父div 的距離爲父padding 和子marign 裏大的一個
FF裏 y 軸上父padding=0 且 border=0 時，子div 到父div 的距離爲0，子marign 做用到父div 外面

七、padding，marign，height，width的傻瓜式解決技巧

注意是技巧，不是方法：
寫好標準頭
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>
<html xmlns=」http://www.w3.org/1999/xhtml」>
高儘可能用padding，慎用margin，height儘可能補上100%，父級height有定值子級height不用100%，子級全爲浮動時底部補個空clear:both的div寬儘可能用margin，慎用padding，width算準實際要的減去padding

八、列表類

1. ul標籤在FF中默認是有 padding值的，而在IE中只有margin有值
先定義 ul {margin:0;padding:0;}
2. ul和ol列表縮進問題消除ul、ol等列表的縮進時，樣式應寫成: {list-style:none;margin:0px;padding:0px;}

九、顯示類（display:block,inline）

1. display:block,inline兩個元素
display:block; //能夠爲內嵌元素模擬爲塊元素
display:inline; //實現同一行排列的的效果
display:table; //for FF,模擬table的效果
display:block 塊元素，元素的特色是：
老是在新行上開始；高度，行高以及頂和底邊距均可控制；寬度缺省是它的容器的100%，除非設定一個寬度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是塊元素的例子
display:inline 就是將元素顯示爲行內元素，元素的特色是：和其餘元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
2.鼠標手指狀顯示
所有用標準的寫法 cursor: pointer;

十、背景、圖片類

1. background顯示問題
所有注意補齊 width，height 屬性
2.背景透明問題
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好兩個都寫，並將opacity屬性放在下面

十一、min-height最小高度的實現（兼容IE六、IE七、FF）

做用是：當容器的內容較少時，能保持一個最小的高度，以避免破壞了佈局或UI設計效果。而當容器內的內容增長的時候，容器可以自動的伸展以適應內容的變化。
#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

十二、著名的 Meyer Reset（重置）

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

1三、跨瀏覽器的CSS透明度

.transparent {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;

1四、文字陰影（CSS3）

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

1五、Box陰影(CSS3)

.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }

1六、Sticky Footer (讓頁腳永遠停靠在頁面底部，而不是根據絕對位置)

<div id="wrap">
<div id="main" class="clearfix"></div>
</div>
<div id="footer"> </div>
CSS:
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; }
#footer {
position: relative;
margin-top: -150px;
height: 150px;
clear:both;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;}

1七、iframe元素內嵌頁面如何去掉繼承的html及body背景色/背景圖片

iframe元素的功能是在一個文檔裏內嵌一個文檔，建立一個浮動的幀。內嵌文檔時一個完整的頁面，有HTML,BODY等屬性。這樣遇到了一個問題，若是樣式表中對BODY定義過背景色/背景圖片，那麼內嵌文檔將所有繼承過來。因此如何去掉背景色和背景圖片：
【1】去掉背景色：filter:Chroma(Color=white);
舉例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景圖片：
舉例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
注意：內嵌頁面同時也要增長BODY屬性：
<body bgcolor="transparent" style='background:transparent'>

1八、爲何web標準中沒法設置IE瀏覽器滾動條顏色了？

原來樣式設置：
<style type="text/css">
body{scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>
解決辦法是將body換成html。

1九、爲何中火狐瀏覽器下文本沒法撐開容器的高度？

標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度，又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義：
div { height:auto!important; height:200px; min-height:200px; }

20、如何定義1px左右高度的容器？

IE6下這個問題是由於默認的行高形成的，解決的方法也有不少，例如：overflow:hidden | zoom:0.08 | line-height:1px

2一、怎麼樣才能讓層顯示在FLASH之上呢？

解決的辦法是給FLASH設置透明:
<a href="http://www.chinaz.com/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />

2二、怎樣使一個div層居中於瀏覽器中？

<style type="text/css">

</style>

2三、怎樣使div背景透明？

首先，須要這兩個層都是兄弟關係，其次，這兩個層都須要絕對定位。舉個例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="colinivy" />
<title> Colinivy's world</title>
<style type="text/css">
body {
font:normal 12px/30px Verdana; }
#test {
position:relative;
width:400px;
height:50px;
}
#inner {
z-index:2;
position:absolute;
top:10px;
left:10px;
width:380px;
height:30px;
color:#003;
font-weight:bold;
text-align:center;
}
#transbox {
z-index:1;
position:absolute;
top:0px;
left:0px;
width:400px;
height:50px;
background:#eef;
border:1px solid #a00;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity:0.4;
}
</style>
</head>
<body>
<div id="test">
<div>
<p>這裏不少的文字,這裏不少的文字,這裏不少的文字,這裏不少的文字,</p>
</div>
<div id="transbox"></div>
<div id="inner">
BlueIdea,BlueIdea,BlueIdea
</div>
</div>
</body>
</html>

2四、怎樣去掉選中時的虛線框？

利用onfocus="this.blur();"例如：<a href="#" onfocus="this.blur();">測試</a>

2五、ie6下png背景顯示問題？

針對ie6下png背景顯示問題,CSS中能夠這樣解決:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);

2六、文字與表單對齊方法？

設置表單元素第一字體爲Tahoma(Verdana系列也可),並設置vertical-align:middle.建設你們把這個約定寫入CSS RESET中,能減少不少麻煩:
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

2七、optgroup標籤的用法？

optgroup標籤,不爲人知,它對提高選擇表單用戶體驗頗有幫助。就是能夠在有不少選項時,對這些選項分組：例子：
<select id="selectId">
<optgroup label="GROUP ONE">
<option value="1">one select</option>
<option value="2">two select</option>
</optgroup>
<optgroup label="GROUP TWO">
<option value="3">three select</option>
<option value="4">four select</option>
</optgroup>
</select>

2八、文字與圖片垂直居中對齊方法？

爲圖片與文字的共同父元素全部的後代元素定義*{vertical-align:middle};例如:
<p>我要的堅強<img src="i/image.gif" /></p>
只需定義p*{vertical-align:middle}便可使文字與圖片同行垂直居中.

2九、文章標題列表中日期居右顯示的兩種方法？

方法A相對方法B省資源,但比方法B要多寫兩句代碼,使用時請視狀況而定:
方法A：
<p>這是文章標題<span>2010-10-10</span></p>
而後定義p和span的樣式：
p{ position:relative}
p span{ position:absolute; right:0}
方法B:
<p><span>2010-10-10</span>這是文章標題</p>
而後定義span右浮動:
p span{float:right}

30、ie6下max/min-width/height實現？

ie6下max/min-width/height實現,_width: expression_r(this.width >600 ? 「600px」 : true);,height同理.

3一、空白外邊距互相疊加的問題？

通常經過添加透明邊框或者1px的內邊距避免；
其一,爲外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid transparent;
其二,爲外圍元素定義內邊距填充..具體到本例,即在樣式div中加入padding:1px；
例如：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白邊距疊加demo@Mr.Think</title>
<style>
body{width:300px; font-family:'微軟雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白邊距疊加demo@Mr.Think</p></div>
</body>
</html>

3二、網頁設計中的默認字體

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
說明：line-height採用1.5, 也就是18px. 這是淘寶視覺規範中定義的行高，對於12px字體，這個行高看起來很舒服。font-family默認採用Tahoma. Tahoma是英文Windows操做系統的默認字體，這個字體比較均衡，顯示中英文混排很不錯，是經久耐看的一款字體。

3三、瀏覽器兼容——經常使用的css hack

（1）.title{ height:200px;
*height:200px;
_height:200px; }
（2）.title{ height:200px;
*height:200px !important;
*height:200px; }
（3）.title{ height:200px; }
*html.title{ height:200px;}
*+html.title{ height:200px;}css