為什么會有兼容問題？

由于市場上瀏覽器種類眾多，而不同瀏覽器其內(nèi)核亦不盡相同，所以各個瀏覽器對網(wǎng)頁的解析就有一定出入，這也是導(dǎo)致瀏覽器兼容問題出現(xiàn)的主要原因，我們的網(wǎng)頁需要在主流瀏覽器上正常運行，就需要做好瀏覽器兼容。

使用Trident內(nèi)核的瀏覽器：IE、Maxthon、TT； 使用Gecko內(nèi)核的瀏覽器：Netcape6及以上版本、FireFox； 使用Presto內(nèi)核的瀏覽器：Opera7及以上版本； 使用Webkit內(nèi)核的瀏覽器：Safari、Chrome。?
而我現(xiàn)在所說的兼容性問題，主要是說IE與幾個主流瀏覽器如firefox，google等。而對IE瀏覽器來說，IE7又是個跨度，因為之前的版本更新甚慢，bug甚多。從IE8開始，IE瀏覽器漸漸遵循標(biāo)準(zhǔn)，到IE9后由于大家都一致認(rèn)為標(biāo)準(zhǔn)很重要，可以說在兼容性上比較好了，但是在中國來說，由于xp的占有率問題，使用IE7以下的用戶仍然很多，所以我們不得不考慮低版本瀏覽器的兼容。

對瀏覽器兼容問題，一般分，HTML，Javascript兼容，CSS兼容。 其中html相關(guān)問題比較容易處理，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素，導(dǎo)致其不能解析，所以平時注意一點就是。特別是HTML5增加了許多新標(biāo)簽，低版本瀏覽器有點影響時代進(jìn)步啊

問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補丁和內(nèi)補丁不同

• 問題癥狀：隨便寫幾個標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
• 碰到頻率:100%
• 解決方案：css里?*{margin:0;padding:0;}
• 備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設(shè)置各個標(biāo)簽的內(nèi)外補丁是0。

問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大

• 問題癥狀:常見癥狀是ie6中后面的一塊被頂?shù)较乱恍?/li>
• 碰到頻率：90%（稍微復(fù)雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
• 解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
• 備注：我們最常用的就是div+css布局了，而div就是一個典型的塊屬性標(biāo)簽，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設(shè)置如果用margin實現(xiàn)，這就是一個必然會碰到的兼容性問題。

問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在ie6，ie7，遨游中高度超出自己設(shè)置高度

• 問題癥狀：ie6、7和遨游里這個標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
• 碰到頻率：60%
• 解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
• 備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個問題的原因是ie8之前的瀏覽器都會給標(biāo)簽一個最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高。

問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）

• 問題癥狀：ie6里的間距比超過設(shè)置的間距
• 碰到幾率：20%
• 解決方案：在display:block;后面加入display:inline;display:table;
• 備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在ie6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標(biāo)簽，所以我們再加上display:inline的話，它的高寬就不可設(shè)了。這時候我們還需要在display:inline后面加入display:talbe。

問題五：圖片默認(rèn)有間距

• 問題癥狀：幾個img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距，加上問題一中提到的通配符也不起作用。
• 碰到幾率：20%
• 解決方案：使用float屬性為img布局
• 備注：因為img標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個間距。去掉這個間距使用float是正道

問題六：標(biāo)簽最低高度設(shè)置min-height不兼容

• 問題癥狀：因為min-height本身就是一個不兼容的css屬性，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容
• 碰到幾率：5%
• 解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
• 備注：在B/S系統(tǒng)前端開時，有很多情況下我們有這種需求。當(dāng)內(nèi)容小于一個值（如300px）時。容器的高度為300px；當(dāng)內(nèi)容高度大于這個值時，容器高度被撐高，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題。

問題七：透明度的兼容css設(shè)置

方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當(dāng)然熟練到一定的程度就沒這么麻煩了。建議經(jīng)常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標(biāo)簽的默認(rèn)屬性解析不同造成的，只要我們稍加設(shè)置都能輕松地解決這些兼容問題。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話，就能很好的理解為什么會出現(xiàn)兼容問題以及怎么去解決這些兼容問題。

---

---

技巧一：css hack

使用hacker 我可以把瀏覽器分為3類：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）

• ie6認(rèn)識的hacker 是下劃線_ 和星號 *
• ie7 遨游認(rèn)識的hacker是星號 * （包括上面問題6中的 !important也算是hack的一種。不過實用性較小。）

比如這樣一個css設(shè)置 height:300px;*height:200px;_height:100px; ie6瀏覽器在讀到 height:300px的時候會認(rèn)為高時300px；繼續(xù)往下讀，他也認(rèn)識*heihgt， 所以當(dāng)ie6讀到*height:200px的時候會覆蓋掉前一條的相沖突設(shè)置，認(rèn)為高度是200px。繼續(xù)往下讀，ie6還認(rèn)識_height,所以他又會覆蓋掉200px高的設(shè)置，把高度設(shè)置為100px； ie7和遨游也是一樣的從高度300px的設(shè)置往下讀。當(dāng)它們讀到*height200px的時候就停下了，因為它們不認(rèn)識_height。所以它們會把高度解析為200px； 剩下的瀏覽器只認(rèn)識第一個height:300px;所以他們會把高度解析為300px。

來源：https://blog.csdn.net/xustart7720/article/details/73604651/

因為優(yōu)先級相同且相沖突的屬性設(shè)置后一個會覆蓋掉前一個，所以書寫的次序是很重要的。

/* CSS屬性級Hack */ color:red; /* 所有瀏覽器可識別*/_color:red; /* 僅IE6 識別 */*color:red; /* IE6、IE7 識別 */ +color:red; /* IE6、IE7 識別 */ *+color:red; /* IE6、IE7 識別 */ [color:red; /* IE6、IE7 識別 */ color:red\9; /* IE6、IE7、IE8、IE9 識別 */ color:red\0; /* IE8、IE9 識別*/ color:red\9\0; /* 僅IE9識別 */ color:red \0; /* 僅IE9識別 */ color:red!important; /* IE6 不識別!important 有危險*/ /* CSS選擇符級Hack */ *html #demo { color:red;} /* 僅IE6 識別 */ *+html #demo { color:red;} /* 僅IE7 識別 */ body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識別 */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識別 */ :root #demo { color:red\9; } : /* 僅IE9識別 */

?

來源：https://blog.csdn.net/xustart7720/article/details/73604651/

?

越少的浮動，就會越少的代碼，會有更靈活的頁面，會有擴展性更強的頁面。這不多說，歸結(jié)為到一定水平了，浮動會用的較少。另外，您也會避免使用浮動+margin的用法。所以，越后來越不易遇到這種bug。

技巧二：padding，marign，height，width

注意是技巧，不是方法： 寫好標(biāo)準(zhǔn)頭?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>?http://www.w3.org/1999/xhtml”>?盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div寬盡量用margin，慎用padding，width算準(zhǔn)實際要的減去padding

技巧三：顯示類（display:block,inline）

display:block,inline兩個元素display:block; //可以為內(nèi)嵌元素模擬為塊元素display:inline; //實現(xiàn)同一行排列的的效果 display:table; //for FF,模擬table的效果

?

display:block塊元素，元素的特點是： 總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個寬度

display:inline就是將元素顯示為行內(nèi)元素，元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。span，a，label，input，img，strong和em是 inline 元素的例子

技巧四：怎樣使一個div層居中于瀏覽器中？

1）

<style type="text/css"> <!-- div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> </style>

?

2）div里的內(nèi)容，IE默認(rèn)為居中，而FF默認(rèn)為左對齊，可以嘗試增加代碼margin: 0 auto;

技巧五：float的div閉合;清除浮動;自適應(yīng)高度

① 例如：＜div id="floatA">＜div id="floatB">＜div id="NOTfloatC">

• 這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)
• 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。在＜divclass="floatB">＜div class="NOTfloatC">之間加上＜div class="clear">這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clear{clear:both;}

②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自適應(yīng)，要在wrapper里面加上overflow:hidden; 當(dāng)包含float的box的時候，高度自適應(yīng)在IE下無效，這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達(dá)到了兼容。?
例如某一個wrapper如下定義：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

?

③對于排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div后面做一個統(tǒng)一的背景,譬如:

<div id=”page”><div id=”left”>＜/div> <div id=”center”>＜/div> <div id=”right”>＜/div> </div>

?

比如我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會發(fā)現(xiàn)隨著left centerright的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決：

<div id=”page”><div id=”bg” style=”float:left;width:100%”> <div id=”left”>＜/div> <div id=”center”>＜/div> <div id=”right”>＜/div> </div> </div>

?

再嵌入一個float left而寬度是100%的DIV解決之。

④萬能float 閉合(非常重要!)

關(guān)于 clear float 的原理可參見 [How To ClearFloats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上class=”clearfix”即可,屢試不爽。

/* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */

?

或者這樣設(shè)置：.hackbox{display:table; //將對象作為塊元素級的表格顯示}

技巧六：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 外面

?

web前端開發(fā)過程中，出現(xiàn)瀏覽器兼容問題，一般從什么角度考慮解決：

1、寫代碼的時候遵循W3C標(biāo)準(zhǔn)，按照最新穩(wěn)定版本的IE或WebKit內(nèi)核瀏覽器進(jìn)行編碼。
2、遇到部分無法全面解決瀏覽器兼容的時候，采取CSS的hack手段進(jìn)行針對性微調(diào)。
3、遇到特別難解決的，可以用JS強制修改。

?

border:none與border:0的區(qū)別

體現(xiàn)有兩點：

1、理論上的性能差異；

2、瀏覽器兼容性的差異。

1、性能差異：

【border：0】把border設(shè)為“0“像素雖然在頁面上看不見，但按border默認(rèn)值理解，瀏覽器依然會對border-width/border-color進(jìn)行渲染，即已經(jīng)占用了內(nèi)存值。

【border：none】把border設(shè)為”none“即沒有，瀏覽器解析”none“時將不作出渲染動作，即不會消耗內(nèi)存值。

2、兼容性差異：

兼容性差異只針對IE6、IE7與標(biāo)簽button、input而言，在win、win7的XP主題下均會出現(xiàn)此現(xiàn)象。

當(dāng)border為”none“時對IE6、IE7無效邊框依然存在，如下圖所示：

當(dāng)border為”0“時對IE6、IE7，如下圖所示：

當(dāng)border為”0“或者”none“時Firefox下顯示一致，如下圖所示：

不同瀏覽器margin和padding差異較大

顯示區(qū)別

對于IE,父元素用text-align:center;可實現(xiàn)父級元素內(nèi)的子元素居中，

對于FF,子元素需要用margin：0 auto。

在IE6中無法設(shè)置微型高度

顯示區(qū)別

?

?

?

1、居中問題

div里的內(nèi)容，IE默認(rèn)為居中，而FF默認(rèn)為左對齊，可以嘗試增加代碼margin: 0 auto;

2、高度問題

兩上下排列或嵌套的div，上面的div設(shè)置高度(height)，如果div里的實際內(nèi)容大于所設(shè)高度，在FF中會出現(xiàn)兩個div重疊的現(xiàn)象；但在IE中，下面的div會自動給上面的div讓出空間所以為避免出現(xiàn)層的重疊，高度一定要控制恰當(dāng)，或者干脆不寫高度，讓他自動調(diào)節(jié)，比較好的方法是 height:100%;但當(dāng)這個div里面一級的元素都float了的時候，則需要在div塊的最后，閉和前加一個沉底的空div，對應(yīng)CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3、clear:both;

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

4、IE浮動 margin產(chǎn)生的雙倍距離

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

5、padding問題

FF設(shè)置 padding 后，div會增加 height 和 width，但I(xiàn)E不會 （* 標(biāo)準(zhǔn)的 XHTML1.0 定義 dtd 好像一致了）高度控制恰當(dāng)，或嘗試使用 height:100%;寬度減少使用 padding但根據(jù)實際經(jīng)驗，一般FF和IE的 padding 不會有太大區(qū)別，div 的實際寬 = width + padding ，所以div寫全 width 和 padding，width 用實際想要的寬減去 padding 定義。

6、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 外面

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

注意是技巧，不是方法：
寫好標(biāo)準(zhǔn)頭
<!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算準(zhǔn)實際要的減去padding

8、列表類

1. ul標(biāo)簽在FF中默認(rèn)是有 padding值的，而在IE中只有margin有值
先定義 ul {margin:0;padding:0;}
2. ul和ol列表縮進(jìn)問題消除ul、ol等列表的縮進(jìn)時，樣式應(yīng)寫成: {list-style:none;margin:0px;padding:0px;}

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

1. display:block,inline兩個元素
display:block; //可以為內(nèi)嵌元素模擬為塊元素
display:inline; //實現(xiàn)同一行排列的的效果
display:table; //for FF,模擬table的效果
display:block 塊元素，元素的特點是：
總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個寬度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是塊元素的例子
display:inline 就是將元素顯示為行內(nèi)元素，元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
2.鼠標(biāo)手指狀顯示
全部用標(biāo)準(zhǔn)的寫法 cursor: pointer;

10、背景、圖片類

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屬性放在下面

11、min-height最小高度的實現(xiàn)（兼容IE6、IE7、FF）

作用是：當(dāng)容器的內(nèi)容較少時，能保持一個最小的高度，以免破壞了布局或UI設(shè)計效果。而當(dāng)容器內(nèi)的內(nèi)容增加的時候，容器能夠自動的伸展以適應(yīng)內(nèi)容的變化。
#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

12、著名的 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: "" "";?
}?

13、跨瀏覽器的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;

14、文字陰影（CSS3）

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

15、Box陰影(CSS3)

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

16、Sticky Footer (讓頁腳永遠(yuǎn)?？吭陧撁娴撞?#xff0c;而不是根據(jù)絕對位置)

<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;}

17、iframe元素內(nèi)嵌頁面如何去掉繼承的html及body背景色/背景圖片

iframe元素的功能是在一個文檔里內(nèi)嵌一個文檔，創(chuàng)建一個浮動的幀。內(nèi)嵌文檔時一個完整的頁面，有HTML,BODY等屬性。這樣遇到了一個問題，如果樣式表中對BODY定義過背景色/背景圖片，那么內(nèi)嵌文檔將全部繼承過來。所以如何去掉背景色和背景圖片：
【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>
注意：內(nèi)嵌頁面同時也要增加BODY屬性：
<body bgcolor="transparent" style='background:transparent'>

18、為什么web標(biāo)準(zhǔn)中無法設(shè)置IE瀏覽器滾動條顏色了？

原來樣式設(shè)置：
<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。

19、為什么中火狐瀏覽器下文本無法撐開容器的高度？

標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度，又想能被撐開需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識min-height的IE6 可以這樣定義：
div { height:auto!important; height:200px; min-height:200px; }

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

IE6下這個問題是因為默認(rèn)的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

21、怎么樣才能讓層顯示在FLASH之上呢？

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

22、怎樣使一個div層居中于瀏覽器中？

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>

23、怎樣使div背景透明？

首先，需要這兩個層都是兄弟關(guān)系，其次，這兩個層都需要絕對定位。舉個例子：
<!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>

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

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

25、ie6下png背景顯示問題？

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

26、文字與表單對齊方法？

設(shè)置表單元素第一字體為Tahoma(Verdana系列也可),并設(shè)置vertical-align:middle.建設(shè)大家把這個約定寫入CSS RESET中,能減小很多麻煩:
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

27、optgroup標(biāo)簽的用法？

optgroup標(biāo)簽,鮮為人知,它對提升選擇表單用戶體驗很有幫助。就是可以在有很多選項時,對這些選項分組：例子：
<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>

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

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

29、文章標(biāo)題列表中日期居右顯示的兩種方法？

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

30、ie6下max/min-width/height實現(xiàn)？

ie6下max/min-width/height實現(xiàn),_width: expression_r(this.width >600 ? “600px” : true);,height同理.

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

一般通過添加透明邊框或者1px的內(nèi)邊距避免；
其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid transparent;
其二,為外圍元素定義內(nèi)邊距填充..具體到本例,即在樣式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>

32、網(wǎng)頁設(shè)計中的默認(rèn)字體

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
說明：line-height采用1.5, 也就是18px. 這是淘寶視覺規(guī)范中定義的行高，對于12px字體，這個行高看起來很舒服。font-family默認(rèn)采用Tahoma. Tahoma是英文Windows操作系統(tǒng)的默認(rèn)字體，這個字體比較均衡，顯示中英文混排很不錯，是經(jīng)久耐看的一款字體。

33、瀏覽器兼容——常用的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;}

轉(zhuǎn)載于:https://www.cnblogs.com/sunshinezjb/p/9247845.html

總結(jié)

以上是生活随笔為你收集整理的常见的浏览器兼容问题和解决方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。