、IE與FireFox的js和css

png透明 AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)

enabled：可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true：默認(rèn)值。濾鏡激活。false：濾鏡被禁止。
sizingMethod：可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。crop：剪切圖片以適應(yīng)對(duì)象尺寸。image：默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。scale：縮放圖片以適應(yīng)對(duì)象的尺寸邊界。
src：必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。

firefox不能對(duì)innerText支持
firefox支持innerHTML但卻不支持innerText，它支持textContent來(lái)實(shí)現(xiàn)innerText，不過(guò)默認(rèn)把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代碼也可以用innerHTML代替。

禁止選取網(wǎng)頁(yè)內(nèi)容
在IE中一般用js：obj.onselectstart=function(){return false;}
而firefox用CSS:-moz-user-select:none

濾鏡的支持(例：透明濾鏡)
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;

捕獲事件
IE：obj.setCapture() 、obj.releaseCapture()
Firefox：document.addEventListener(”mousemove”,mousemovefunction,true);
document.removeEventListener(”mousemove”,mousemovefunction,true);

獲取鼠標(biāo)位置
IE:event.clientX、event.clientY
firefox：需要事件函數(shù)傳遞事件對(duì)象
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

DIV等元素的邊界問(wèn)題
比如：設(shè)置一個(gè)div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中：div的寬度（包括邊框?qū)挾龋?00px，div的高度（包括邊框?qū)挾龋?00px；
而firefox：div的寬度（包括邊框?qū)挾龋?02px，div的高度（包括邊框?qū)挾龋?02px；

判斷瀏覽器類型
var isIE=document.all ? true : false;
我寫了一個(gè)變量，如果支持document.all語(yǔ)法那么isIE=true，否則isIE=false

在不同瀏覽器下的CSS處理
一般可以用!important來(lái)優(yōu)先使用css語(yǔ)句（僅firefox支持）
比如：{border-width:0px!important;border-width:1px;}
在firefox下這個(gè)元素是沒(méi)有邊框的，在IE下邊框?qū)挾仁?px

document.formName.item(”itemName”) 問(wèn)題
問(wèn)題說(shuō)明：IE下，可以
使用 document.formName.item(”itemName”) 或 document.formName.elements
[”elementName”]；Firefox下，只能使用document.formName.elements[”elementName”]。
解決方法：統(tǒng)一使用document.formName.elements[”elementName”]。

集合類對(duì)象問(wèn)題
問(wèn)題說(shuō)明：IE下，可以使用()或[]獲取集合類對(duì)象；Firefox下，只能使用[]獲取集合類對(duì)象。
解決方法：統(tǒng)一使用 [] 獲取集合類對(duì)象。

自定義屬性問(wèn)題
問(wèn)題說(shuō)明：IE下，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。
解決方法：統(tǒng)一通過(guò) getAttribute() 獲取自定義屬性。

eval(”idName”)問(wèn)題
問(wèn)題說(shuō)明：IE下，可以使用 eval(”idName”) 或
getElementById(”idName”) 來(lái)取得 id 為 idName 的HTML對(duì)象；Firefox下，只能使用
getElementById(”idName”) 來(lái)取得 id 為 idName 的HTML對(duì)象。
解決方法：統(tǒng)一用 getElementById(”idName”) 來(lái)取得 id 為 idName 的HTML對(duì)象。

變量名與某HTML對(duì)象ID相同的問(wèn)題
問(wèn)題說(shuō)明：IE下，HTML對(duì)象的ID可以作為 document 的下屬對(duì)象變量名直接使用，F(xiàn)irefox下則不能；Firefox下，可以使用與HTML對(duì)象ID相同的變量名，IE下則不能。
解決方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML對(duì)象ID相同的變量名，以減少錯(cuò)誤；在聲明變量時(shí)，一律加上var關(guān)鍵字，以避免歧義。

const問(wèn)題
問(wèn)題說(shuō)明：Firefox下，可以使用const關(guān)鍵字或var關(guān)鍵字來(lái)定義常量；IE下，只能使用var關(guān)鍵字來(lái)定義常量。
解決方法：統(tǒng)一使用var關(guān)鍵字來(lái)定義常量。

input.type屬性問(wèn)題
問(wèn)題說(shuō)明：IE下 input.type 屬性為只讀；但是Firefox下 input.type 屬性為讀寫。
解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來(lái)的input，然后在同樣的位置再插入一個(gè)新的input元素。

window.event問(wèn)題
問(wèn)題說(shuō)明：window.event 只能在IE下運(yùn)行，而不能在Firefox下運(yùn)行，這是因?yàn)镕irefox的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用。
解決方法：在事件發(fā)生的函數(shù)上加上event參數(shù)，在函數(shù)體內(nèi)(假設(shè)形參為evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：<input type=”button” onclick=”doSomething(event)”/>
<script language=”Javascript”>
function doSomething(evt) {
var myEvent = evt ? evt: (window.event ? window.event : null)
…
}

event.x與event.y問(wèn)題
問(wèn)題說(shuō)明：IE下，even對(duì)象有x、y屬性，但是沒(méi)有pageX、pageY屬性；Firefox下，even對(duì)象有pageX、pageY屬性，但是沒(méi)有x、y屬性。
解決方法：var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;
如果考慮第8條問(wèn)題，就改用myEvent代替event即可。

event.srcElement問(wèn)題
問(wèn)題說(shuō)明：IE下，even對(duì)象有srcElement屬性，但是沒(méi)有target屬性；Firefox下，even對(duì)象有target屬性，但是沒(méi)有srcElement屬性。
解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target;
如果考慮第8條問(wèn)題，就改用myEvent代替event即可。

window.location.href問(wèn)題
問(wèn)題說(shuō)明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。
解決方法：使用 window.location 來(lái)代替 window.location.href。當(dāng)然也可以考慮使用 location.replace()方法。

模態(tài)和非模態(tài)窗口問(wèn)題
問(wèn)題說(shuō)明：IE下，可以通過(guò)showModalDialog和showModelessDialog打開(kāi)模態(tài)和非模態(tài)窗口；Firefox下則不能。
解決方法：直接使用 window.open(pageURL,name,parameters) 方式打開(kāi)新窗口。
如
果需要將子窗口中的參數(shù)傳遞回父窗口，可以在子窗口中使用window.opener來(lái)訪問(wèn)父窗口。如果需要父窗口控制子窗口的話，使用var
subWindow = window.open(pageURL,name,parameters);來(lái)獲得新開(kāi)的窗口對(duì)象。

frame和iframe問(wèn)題
以下面的frame為例：
<frame src=”xxx.html” id=”frameId” name=”frameName” />
(1)訪問(wèn)frame對(duì)象
IE：使用window.frameId或者window.frameName來(lái)訪問(wèn)這個(gè)frame對(duì)象；
Firefox：使用window.frameName來(lái)訪問(wèn)這個(gè)frame對(duì)象；
解決方法：統(tǒng)一使用 window.document.getElementById(”frameId”) 來(lái)訪問(wèn)這個(gè)frame對(duì)象；

(2)切換frame內(nèi)容
在IE和Firefox中都可以使用window.document.getElementById(”frameId”).src = “xxx.html”或window.frameName.location = “xxx.html”來(lái)切換frame的內(nèi)容；
如果需要將frame中的參數(shù)傳回父窗口，可以在frame中使用parent關(guān)鍵字來(lái)訪問(wèn)父窗口。

body載入問(wèn)題
問(wèn)題說(shuō)明：Firefox的body對(duì)象在body標(biāo)簽沒(méi)有被瀏覽器完全讀入之前就存在；而IE的body對(duì)象則必須在body標(biāo)簽被瀏覽器完全讀入之后才存在。
[注] 這個(gè)問(wèn)題尚未實(shí)際驗(yàn)證，待驗(yàn)證后再來(lái)修改。
[注] 經(jīng)驗(yàn)證，IE6、Opera9以及FireFox2中不存在上述問(wèn)題，單純的JS腳本可以訪問(wèn)在腳本之前已經(jīng)載入的所有對(duì)象和元素，即使這個(gè)元素還沒(méi)有載入完成。

事件委托方法
問(wèn)題說(shuō)明：IE下，使用 document.body.onload = inject;其中function inject()在這之前已被實(shí)現(xiàn)；在Firefox下，使用 document.body.onload = inject();
解決方法：統(tǒng)一使用 document.body.onload=new Function(”inject()”);或者 document.body.onload = function(){/* 這里是代碼 */}
[注意] Function和function的區(qū)別

訪問(wèn)的父元素的區(qū)別
問(wèn)題說(shuō)明：在IE下，使用 obj.parentElement 或 obj.parentNode 訪問(wèn)obj的父結(jié)點(diǎn)；在firefox下，使用 obj.parentNode 訪問(wèn)obj的父結(jié)點(diǎn)。
解決方法：因?yàn)閒irefox與IE都支持DOM，因此統(tǒng)一使用obj.parentNode 來(lái)訪問(wèn)obj的父結(jié)點(diǎn)。

cursor:hand VS cursor:pointer
問(wèn)題說(shuō)明：firefox不支持hand，但ie支持pointer ，兩者都是手形指示。
解決方法：統(tǒng)一使用pointer。

innerText的問(wèn)題
問(wèn)題說(shuō)明：innerText在IE中能正常工作，但是innerText在FireFox中卻不行。
解決方法：在非IE瀏覽器中使用textContent代替innerText。
示例：
if(navigator.appName.indexOf(”Explorer”) >-1){
document.getElementById(”element”).innerText = “my text”;
}else{
document.getElementById(”element”).textContent = “my text”;
}
[注] innerHTML 同時(shí)被ie、firefox等瀏覽器支持，其他的，如outerHTML等只被ie支持，最好不用。

對(duì)象寬高賦值問(wèn)題
問(wèn)題說(shuō)明：FireFox中類似 obj.style.height = imgObj.height 的語(yǔ)句無(wú)效。
解決方法：統(tǒng)一使用 obj.style.height = imgObj.height + “px”;

Table操作問(wèn)題
問(wèn)題說(shuō)明：ie、firefox以及其它瀏覽器對(duì)于 table 標(biāo)簽的操作都各不相同，在ie中不允許對(duì)table和tr的innerHTML賦值，使用js增加一個(gè)tr時(shí)，使用appendChild方法也不管用。
解決方法：
//向table追加一個(gè)空行：
var row = otable.insertRow(-1);
var cell = document.createElement(”td”);
cell.innerHTML = “”;
cell.className = “XXXX”;
row.appendChild(cell);
[注] 由于俺很少使用JS直接操作表格，這個(gè)問(wèn)題沒(méi)有遇見(jiàn)過(guò)。建議使用JS框架集來(lái)操作table，如JQuery。

ul和ol列表縮進(jìn)問(wèn)題
消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫成：list-style:none;margin:0px;padding:0px;
其中margin屬性對(duì)IE有效，padding屬性對(duì)FireFox有效。← 此句表述有誤，詳細(xì)見(jiàn)↓
[注] 這個(gè)問(wèn)題尚未實(shí)際驗(yàn)證，待驗(yàn)證后再來(lái)修改。
[注]
經(jīng)驗(yàn)證，在IE中，設(shè)置margin:0px可以去除列表的上下左右縮進(jìn)、空白以及列表編號(hào)或圓點(diǎn)，設(shè)置padding對(duì)樣式?jīng)]有影響；在Firefox
中，設(shè)置margin:0px僅僅可以去除上下的空白，設(shè)置padding:0px后僅僅可以去掉左右縮進(jìn)，還必須設(shè)置list-style:none才
能去除列表編號(hào)或圓點(diǎn)。也就是說(shuō)，在IE中僅僅設(shè)置margin:0px即可達(dá)到最終效果，而在Firefox中必須同時(shí)設(shè)置margin:0px、
padding:0px以及l(fā)ist-style:none三項(xiàng)才能達(dá)到最終效果。

CSS透明問(wèn)題
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好兩個(gè)都寫，并將opacity屬性放在下面。

CSS圓角問(wèn)題
IE：ie7以下版本不支持圓角。
FF：-moz-border-
radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-
radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-
radius- bottomright:4px;。
[注] 圓角問(wèn)題是CSS中的經(jīng)典問(wèn)題，建議使用JQuery框架集來(lái)設(shè)置圓角，讓這些復(fù)雜的問(wèn)題留給別人去想吧。

二、IE6/IE7和Firefox對(duì)Div處理的差異

基本HTML代碼

<!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>
<title>Div Float Sample</title>
<style type=”text/css”>
div { margin:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
</style>
</head>
<body>
<div class=”d1″>
<div class=”d2″> </div>
<div class=”d3″> </div>
</div>
</body>
</html>
以上代碼顯示的結(jié)果如下，很正常，結(jié)果相同。

當(dāng)然所有這些情況也許是有合理解釋的，說(shuō)不定增加某一個(gè)style的設(shè)置。

IE6/IE7和Firefox對(duì)Div處理的差異(圖一)

下面會(huì)在這個(gè)基礎(chǔ)上進(jìn)行修改，修改的內(nèi)容都在style中，其他代碼就不再重復(fù)寫了。

請(qǐng)注意，這里的Style中用到了min-height，這個(gè)和height是不同的，min-height指定了對(duì)象的一個(gè)最小高度，當(dāng)對(duì)象的子
內(nèi)容高度超過(guò)這個(gè)最小高度是，這個(gè)對(duì)象會(huì)自動(dòng)撐大。這是一個(gè)非常牛的style，可惜的是，在這個(gè)style和float這個(gè)同樣牛的style一起使用
的時(shí)候，就會(huì)出現(xiàn)各種問(wèn)題。

內(nèi)部一個(gè)Div修改成為float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
顯示結(jié)果如下。

顯示結(jié)果如下，顯示結(jié)果如下！

IE6/IE7和Firefox對(duì)Div處理的差異(圖二)

顯示結(jié)果如下。:left的情況相同？

這個(gè)結(jié)果中，F(xiàn)irefox有點(diǎn)離譜了，兩個(gè)框疊在一起也就罷了，為什么那個(gè)紅框會(huì)變大捏？而且變的大小也很詭異，不知道是按照什么公式計(jì)算出來(lái)的。IE在這里的顯示應(yīng)當(dāng)是附和標(biāo)準(zhǔn)的。

內(nèi)部?jī)蓚€(gè)Div都修改成為float:left

顯示結(jié)果如下。

IE6/IE7和Firefox對(duì)Div處理的差異(圖三)

在這種情況下，F(xiàn)irefox的結(jié)果尚能解釋，可能是float把外層的Div也作為內(nèi)層float影響的范圍，這樣內(nèi)層的就不會(huì)將外層的Div撐大了。IE在這里出現(xiàn)了Margin失效的情況，可以解釋為內(nèi)層第二個(gè)float造成了影響。

干脆把外層的Div也修改成為float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
以上代碼在下面這些Doctype下試驗(yàn)過(guò)，結(jié)果相同。

顯示結(jié)果如下，

IE6/IE7和Firefox對(duì)Div處理的差異(圖四)

這種情況下，F(xiàn)irefox正常了，而IE延續(xù)了前面的不正常情況。

外層是float:left，內(nèi)層最后一個(gè)不再float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
left的情況相同。所以最好是padding和margin都不用?

顯示結(jié)果如下，

IE在這里的顯示應(yīng)當(dāng)是附和標(biāo)準(zhǔn)的。

IE6/IE7和Firefox對(duì)Div處理的差異(圖五)

這和前面第一種加float:left的情況相同。

結(jié)論

再重申一次，本文討論的是一個(gè)比較高級(jí)的話題。如果在style中用height而不是min-height來(lái)設(shè)定高度，是不會(huì)出現(xiàn)以上這些問(wèn)題的。不過(guò)，不用min-height就失去了div自動(dòng)撐大這一個(gè)很有必要的特性。

在min-height和float:left的情況下，沒(méi)有一種完美的寫法讓Firefox和IE結(jié)果相同。不過(guò)仍然可以發(fā)現(xiàn)繞開(kāi)的方法。

進(jìn)一步試驗(yàn)可以發(fā)現(xiàn)，margin遭到的影響在padding上比較好，所以最好是padding和margin都不用，或者只用padding。

兩者相同的代碼如下，

div { padding:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
left的情況相同。當(dāng)對(duì)象的子內(nèi)容高度超過(guò)這個(gè)最小高度是。

顯示結(jié)果如下，

IE6/IE7和Firefox對(duì)Div處理的差異(圖六)

呵呵，總算是一樣了，雖然是湊合著一樣了。幸好一樣了，否則只好用table了。

當(dāng)然所有這些情況也許是有合理解釋的，說(shuō)不定增加某一個(gè)style的設(shè)置，這些問(wèn)題都迎刃而解了，不過(guò)目前我還沒(méi)有找到這個(gè)設(shè)置。

關(guān)于Doctype

可惜的是，在這個(gè)style和float這個(gè)同樣牛的style一起使用的時(shí)候。

以上代碼在下面這些Doctype下試驗(yàn)過(guò)，結(jié)果相同。

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

三、CSS完美兼容IE6/IE7/FF的通用方法

關(guān)于CSS對(duì)各個(gè)瀏覽器兼容已經(jīng)是老生常談的問(wèn)題了, 網(wǎng)絡(luò)上的教程遍地都是.以下內(nèi)容沒(méi)有太多新穎, 純屬個(gè)人總結(jié), 希望能對(duì)初學(xué)者有一定的幫助.
一、CSS HACK

以下兩種方法幾乎能解決現(xiàn)今所有HACK.

1, !important

隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的HACK.(注意寫法.記得該聲明位置需要提前.)

2, IE6/IE77對(duì)FireFox

*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽.

注意:
*+html 對(duì)IE7的HACK 必須保證HTML頂部有如下聲明：

二、萬(wàn)能 float 閉合

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

三、其他兼容技巧

1, FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決)
2, 居中問(wèn)題.
1).垂直居中.將 line-height 設(shè)置為當(dāng)前 div 相同的高度, 再通過(guò) vertical-align: middle.( 注意內(nèi)容不要換行.)
2).水平居中. margin: 0 auto;(當(dāng)然不是萬(wàn)能)
3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上樣式, 需要設(shè)置 display: block;(常見(jiàn)于導(dǎo)航標(biāo)簽)
4, FF 和 IE 對(duì) BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問(wèn)題.
5, ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見(jiàn)于導(dǎo)航標(biāo)簽和內(nèi)容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng).
7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 IE.

1 針對(duì)firefox ie6 ie7的css樣式
現(xiàn)在大部分都是用!important來(lái)hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，
但是ie7對(duì)!important可以正確解釋，會(huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示！找到一個(gè)針
對(duì)IE7不錯(cuò)的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒(méi)有問(wèn)題了。
現(xiàn)在寫一個(gè)CSS可以這樣：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。

2 css布局中的居中問(wèn)題
主要的樣式定義如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說(shuō)明：
首先在父級(jí)元素定義TEXT-ALIGN: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中；對(duì)于IE這樣設(shè)定就已經(jīng)可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要說(shuō)明的是，如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中，建議不要套在一個(gè)DIV里，你可以依次拆出多個(gè)div，
只要在每個(gè)拆出的div里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解釋

#box{ width:600px; //for ie6.0- w/idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮動(dòng)ie產(chǎn)生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離 display:inline; //使浮動(dòng)忽略}
這里細(xì)說(shuō)一下block,inline兩個(gè)元素,Block元素的特點(diǎn)是:總是在新行上開(kāi)始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);

#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的的效果 diplay:table;

IE不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了，如果只用寬度和高度，
正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min-width和min-height的話，IE下面根本等于沒(méi)有設(shè)置寬度和高度。
比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問(wèn)題，可以這樣：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 頁(yè)面的最小寬度

min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，
而它實(shí)際上把width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用，可以把一個(gè)

放到標(biāo)簽下，然后為div指定一個(gè)類：
然后CSS這樣設(shè)計(jì)：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。

7 清除浮動(dòng)

.hackbox{ display:table; //將對(duì)象作為塊元素級(jí)的表格顯示}或者.hackbox{ clear:both;}
或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容，通常和content配合使用，IE不支持此偽對(duì)象，非Ie 瀏覽器支持，
所以并不影響到IE/WIN瀏覽器。這種的最麻煩的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮動(dòng)IE文本產(chǎn)生3象素的bug

左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關(guān)鍵}
HTML代碼

9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)

p[id]{}div[id]{}
這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來(lái)說(shuō)縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.

10 IE捉迷藏的問(wèn)題

當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問(wèn)題。
有些內(nèi)容顯示不出來(lái)，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面。
解決辦法：對(duì)#layout使用line-height屬性或者給#layout使用固定高和寬。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。

11 高度不適應(yīng)

高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用
margin 或paddign 時(shí)。
例：

p對(duì)象中的內(nèi)容

CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。
六、CSS兼容要點(diǎn)分析IE vs FF

CSS 兼容要點(diǎn)：

DOCTYPE 影響 CSS 處理

FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行

FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width

FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式

div 的垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行

cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格XHTML+CSS兼容性解決方案小集

使用XHTML＋CSS構(gòu)架好處不少，但也確實(shí)存在一些問(wèn)題，不論是因?yàn)槭褂貌皇炀氝€是思路不清晰，我就先把一些我遇到的問(wèn)題寫在下面，省的大家四處找^^

1、在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：

div{margin:30px!important;margin:28px;}

注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說(shuō)法!important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：

div{maring:30px;margin:28px}

重復(fù)定義的話按照最后一個(gè)來(lái)執(zhí)行，所以不可以只寫margin:XXpx!important;

2、IE5 和IE6的BOX解釋不一致IE5 下div{width:300px;margin:0 10px 0 10px;}div的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來(lái)計(jì)算的。這時(shí)我們可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

，關(guān)于這個(gè)/**/是什么我也不太明白，只知道IE5和firefox都支持但I(xiàn)E6不支持，如果有人理解的話，請(qǐng)告訴我一聲，謝了！：）

3、ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義

ul{margin:0;padding:0;}

就能解決大部分問(wèn)題

4、關(guān)于腳本，在xhtml1.1中不支持language屬性，只需要把代碼改為

< type="text/Java">
就可以了
七、10個(gè)你未必知道的CSS技巧

1、CSS字體屬性簡(jiǎn)寫規(guī)則

一般用CSS設(shè)定字體屬性是這樣做的：

font-weight:bold;

font-style:italic;

font-varient:small-caps;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

但也可以把它們?nèi)繉懙揭恍猩先ィ?/P>

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不錯(cuò)！只有一點(diǎn)要提醒的：這種簡(jiǎn)寫方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒(méi)有設(shè)定font-weight, font-style, 以及 font-varient ，他們會(huì)使用缺省值，這點(diǎn)要記上。

2、同時(shí)使用兩個(gè)類

一般只能給一個(gè)元素設(shè)定一個(gè)類（Class），但這并不意味著不能用兩個(gè)。事實(shí)上，你可以這樣：

…

同時(shí)給P元素兩個(gè)類，中間用空格格開(kāi)，這樣所有text和side兩個(gè)類的屬性都會(huì)加到P元素上來(lái)。如果它們兩個(gè)類中的屬性有沖突的話，后設(shè)置的起作用，即在CSS文件中放在后面的類的屬性起作用。

補(bǔ)充：對(duì)于一個(gè)ID，不能這樣寫

…

也不能這樣寫

3、CSS border的缺省值

通常可以設(shè)定邊界的顏色，寬度和風(fēng)格，如：

border: 3px solid #000

這位把邊界顯示成3像素寬，黑色，實(shí)線。但實(shí)際上這里只需要指定風(fēng)格即可。

如果只指定了風(fēng)格，其他屬性就會(huì)使用缺省值。一般地，Border的寬度缺省是medium，一般等于3到4個(gè)像素；缺省的顏色是其中文字的顏色。如果這個(gè)值正好合適的話，就不用設(shè)那么多了。

4、CSS用于文檔打印

許多網(wǎng)站上都有一個(gè)針對(duì)打印的版本，但實(shí)際上這并不需要，因?yàn)榭梢杂肅SS來(lái)設(shè)定打印風(fēng)格。

也就是說(shuō)，可以為頁(yè)面指定兩個(gè)CSS文件，一個(gè)用于屏幕顯示，一個(gè)用于打印：

第1行就是顯示，第2行是打印，注意其中的media屬性。

但應(yīng)該在打印 CSS中寫什么東西呢？你可以按設(shè)計(jì)普通CSS的方法來(lái)設(shè)定它。設(shè)計(jì)的同時(shí)就可以把這個(gè)CSS設(shè)成顯示CSS來(lái)檢查它的效果。也許你會(huì)使用 display: none 這個(gè)命令來(lái)關(guān)掉一些裝飾圖片，再關(guān)掉一些導(dǎo)航按鈕。要想了解更多，可以看“打印差異”這一篇。

5、圖片替換技巧

一般都建議用標(biāo)準(zhǔn)的HTML來(lái)顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時(shí)，就只能用圖片了。

比如你想整個(gè)賣東西的圖標(biāo)，你就用了這個(gè)圖片：

這當(dāng)然可以，但對(duì)搜索引擎來(lái)說(shuō)，和正常文字相比，它們對(duì)alt里面的替換文字幾乎沒(méi)有興趣這是因?yàn)樵S多設(shè)計(jì)者在這里放許多關(guān)鍵詞來(lái)騙搜索引擎。所以方法應(yīng)該是這樣的：

Buy widgets

但這樣就沒(méi)有特殊字體了。要想達(dá)到同樣效果，可以這樣設(shè)計(jì)CSS：

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height換成真的圖片的高度。這里，圖片會(huì)當(dāng)作背景顯示出來(lái)，而真正的文字由于設(shè)定了-2000像素這個(gè)縮進(jìn)，它們會(huì)出現(xiàn)在屏幕左邊2000點(diǎn)的地方，就看不見(jiàn)了。但這對(duì)于關(guān)閉圖片的人來(lái)說(shuō)，可能全部看不到了，這點(diǎn)要注意。

6、CSS box模型的另一種調(diào)整技巧

這個(gè)Box模型的調(diào)整主要是針對(duì)IE6之前的IE瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：

#box { width: 100px; border: 5px; padding: 20px }

這樣調(diào)用它：

…

這時(shí)盒子的全寬應(yīng)該是150點(diǎn)，這在除IE6之前的IE瀏覽器之外的所有瀏覽器上都是正確的。但在IE5這樣的瀏覽器上，它的全寬仍是100點(diǎn)。可以用以前人發(fā)明的Box調(diào)整方法來(lái)處理這種差異。

但用CSS也可以達(dá)到同樣的目的，讓它們顯示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

這樣調(diào)用：

…

這樣，不管什么瀏覽器，寬度都是150點(diǎn)了。

7、塊元素居中對(duì)齊

如果想做個(gè)固定寬度的網(wǎng)頁(yè)并且想讓網(wǎng)頁(yè)水平居中的話，通常是這樣：

#content { width: 700px; margin: 0 auto }

你會(huì)使用

來(lái)圍上所有元素。這很簡(jiǎn)單，但不夠好，IE6之前版本會(huì)顯示不出這種效果。改CSS如下：

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

這會(huì)把網(wǎng)頁(yè)內(nèi)容都居中，所以在Content中又加入了

text-align: left 。

8、用CSS來(lái)處理垂直對(duì)齊

垂直對(duì)齊用表格可以很方便地實(shí)現(xiàn)，設(shè)定表格單元 vertical-align: middle 就可以了。但對(duì)CSS來(lái)說(shuō)這沒(méi)用。如果你想設(shè)定一個(gè)導(dǎo)航條是2em高，而想讓導(dǎo)航文字垂直居中的話，設(shè)定這個(gè)屬性是沒(méi)用的。

CSS方法是什么呢？對(duì)了，把這些文字的行高設(shè)為 2em：line-height: 2em ，這就可以了。

9、CSS在容器內(nèi)定位

CSS的一個(gè)好處是可以把一個(gè)元素任意定位，在一個(gè)容器內(nèi)也可以。比如對(duì)這個(gè)容器：

#container { position: relative }

這樣容器內(nèi)所有的元素都會(huì)相對(duì)定位，可以這樣用：

…

如果想定位到距左30點(diǎn)，距上5點(diǎn)，可以這樣：

#navigation { position: absolute; left: 30px; top: 5px }

當(dāng)然，你還可以這樣：

margin: 5px 0 0 30px

注意4個(gè)數(shù)字的順序是：上、右、下、左。當(dāng)然，有時(shí)候定位的方法而不是邊距的方法更好些。

10、直通到屏幕底部的背景色