火狐與IE浏覽器之間的一些差别收集 轉載加整理

  一、IE與FireFox的js和css

1.png透明 AlphaImageLoader

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

enabled：可選項。布爾值(Boolean)。設定或檢索濾鏡是否激活。true：預設值。濾鏡激活。false：濾鏡被禁止。

sizingMethod：可選項。字元串(String)。設定或檢索濾鏡作用的對象的圖檔在對象容器邊界内的顯示方式。crop：剪切圖檔以适應對象尺寸。image：預設值。增大或減小對象的尺寸邊界以适應圖檔的尺寸。scale：縮放圖檔以适應對象的尺寸邊界。

src：必選項。字元串(String)。使用絕對或相對 url 位址指定背景圖像。假如忽略此參數，濾鏡将不會作用。

2.firefox不能對innerText支援

firefox支援innerHTML但卻不支援innerText，它支援textContent來實作innerText，不過預設把多餘的空格也保留了。如果不用textContent，如果字元串裡面不包含HTML代碼也可以用innerHTML代替。

3.禁止選取網頁内容

在IE中一般用js：obj.onselectstart=function(){return false;}

而firefox用CSS:-moz-user-select:none

4.濾鏡的支援(例：透明濾鏡)

IE:filter：alpha(opacity=10);

firefox：-moz-opacity:.10;

5.捕獲事件

IE：obj.setCapture() 、obj.releaseCapture()

Firefox：document.addEventListener(”mousemove”,mousemovefunction,true);

document.removeEventListener(”mousemove”,mousemovefunction,true);

6.擷取滑鼠位置

IE:event.clientX、event.clientY

firefox：需要事件函數傳遞事件對象

obj.οnmοusemοve=function(ev){

X= ev.pageX;Y=ev.pageY;

}

7.DIV等元素的邊界問題

比如：設定一個div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}

IE中：div的寬度（包括邊框寬度）：100px，div的高度（包括邊框寬度）：100px；

而firefox：div的寬度（包括邊框寬度）：102px，div的高度（包括邊框寬度）：102px；

8.判斷浏覽器類型

var isIE=document.all ? true : false;

我寫了一個變量，如果支援document.all文法那麼isIE=true，否則isIE=false

9.在不同浏覽器下的CSS處理

一般可以用!important來優先使用css語句（僅firefox支援）

比如：{border-width:0px!important;border-width:1px;}

在firefox下這個元素是沒有邊框的，在IE下邊框寬度是1px

10.document.formName.item(”itemName”) 問題

問題說明：IE下，可以

使用 document.formName.item(”itemName”) 或 document.formName.elements

[”elementName”]；Firefox下，隻能使用document.formName.elements[”elementName”]。

解決方法：統一使用document.formName.elements[”elementName”]。

11.集合類對象問題

問題說明：IE下，可以使用()或[]擷取集合類對象；Firefox下，隻能使用[]擷取集合類對象。

解決方法：統一使用 [] 擷取集合類對象。

12.自定義屬性問題

問題說明：IE下，可以使用擷取正常屬性的方法來擷取自定義屬性，也可以使用 getAttribute() 擷取自定義屬性；Firefox下，隻能使用 getAttribute() 擷取自定義屬性。

解決方法：統一通過 getAttribute() 擷取自定義屬性。

13.eval(”idName”)問題

問題說明：IE下，可以使用 eval(”idName”) 或

getElementById(”idName”) 來取得 id 為 idName 的HTML對象；Firefox下，隻能使用

getElementById(”idName”) 來取得 id 為 idName 的HTML對象。

解決方法：統一用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。

14.變量名與某HTML對象ID相同的問題

問題說明：IE下，HTML對象的ID可以作為 document 的下屬對象變量名直接使用，Firefox下則不能；Firefox下，可以使用與HTML對象ID相同的變量名，IE下則不能。

解決方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML對象ID相同的變量名，以減少錯誤；在聲明變量時，一律加上var關鍵字，以避免歧義。

15const問題

問題說明：Firefox下，可以使用const關鍵字或var關鍵字來定義常量；IE下，隻能使用var關鍵字來定義常量。

解決方法：統一使用var關鍵字來定義常量。

16.input.type屬性問題

問題說明：IE下 input.type 屬性為隻讀；但是Firefox下 input.type 屬性為讀寫。

解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隐藏原來的input，然後在同樣的位置再插入一個新的input元素。

17.window.event問題

問題說明：window.event 隻能在IE下運作，而不能在Firefox下運作，這是因為Firefox的event隻能在事件發生的現場使用。

解決方法：在事件發生的函數上加上event參數，在函數體内(假設形參為evt)使用 var myEvent = evt?evt:(window.event?window.event:null)

示例：<input type=”button” οnclick=”doSomething(event)”/>

<script language=”javascript”>

function doSomething(evt) {

var myEvent = evt ? evt: (window.event ? window.event : null)

…

}

18.event.x與event.y問題

問題說明：IE下，even對象有x、y屬性，但是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，但是沒有x、y屬性。

解決方法：var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;

如果考慮第8條問題，就改用myEvent代替event即可。

19.event.srcElement問題

問題說明：IE下，even對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。

解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target;

如果考慮第8條問題，就改用myEvent代替event即可。

20.window.location.href問題

問題說明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，隻能使用window.location。

解決方法：使用 window.location 來代替 window.location.href。當然也可以考慮使用 location.replace()方法。

21.模态和非模态視窗問題

問題說明：IE下，可以通過showModalDialog和showModelessDialog打開模态和非模态視窗；Firefox下則不能。

解決方法：直接使用 window.open(pageURL,name,parameters) 方式打開新視窗。

如

果需要将子視窗中的參數傳遞回父視窗，可以在子視窗中使用window.opener來通路父視窗。如果需要父視窗控制子視窗的話，使用var

subWindow = window.open(pageURL,name,parameters);來獲得新開的視窗對象。

22.frame和iframe問題

以下面的frame為例：

<frame src=”xxx.html” id=”frameId” name=”frameName” />

(1)通路frame對象

IE：使用window.frameId或者window.frameName來通路這個frame對象；

Firefox：使用window.frameName來通路這個frame對象；

解決方法：統一使用 window.document.getElementById(”frameId”) 來通路這個frame對象；

(2)切換frame内容

在IE和Firefox中都可以使用window.document.getElementById(”frameId”).src = “xxx.html”或window.frameName.location = “xxx.html”來切換frame的内容；

如果需要将frame中的參數傳回父視窗，可以在frame中使用parent關鍵字來通路父視窗。

23.body載入問題

問題說明：Firefox的body對象在body标簽沒有被浏覽器完全讀入之前就存在；而IE的body對象則必須在body标簽被浏覽器完全讀入之後才存在。

[注] 這個問題尚未實際驗證，待驗證後再來修改。

[注] 經驗證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS腳本可以通路在腳本之前已經載入的所有對象和元素，即使這個元素還沒有載入完成。

24.事件委托方法

問題說明：IE下，使用 document.body.onload = inject;其中function inject()在這之前已被實作；在Firefox下，使用 document.body.onload = inject();

解決方法：統一使用 document.body.οnlοad=new Function(”inject()”);或者 document.body.onload = function(){}

[注意] Function和function的差別

25.通路的父元素的差別

問題說明：在IE下，使用 obj.parentElement 或 obj.parentNode 通路obj的父結點；在firefox下，使用 obj.parentNode 通路obj的父結點。

解決方法：因為firefox與IE都支援DOM，是以統一使用obj.parentNode 來通路obj的父結點。

26.cursor:hand VS cursor:pointer

問題說明：firefox不支援hand，但ie支援pointer ，兩者都是手形訓示。

解決方法：統一使用pointer。

27.innerText的問題

問題說明：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 同時被ie、firefox等浏覽器支援，其他的，如outerHTML等隻被ie支援，最好不用。

28.對象寬高指派問題

問題說明：FireFox中類似 obj.style.height = imgObj.height 的語句無效。

解決方法：統一使用 obj.style.height = imgObj.height + “px”;

29.Table操作問題

問題說明：ie、firefox以及其它浏覽器對于 table 标簽的操作都各不相同，在ie中不允許對table和tr的innerHTML指派，使用js增加一個tr時，使用appendChild方法也不管用。

解決方法：

//向table追加一個空行：

var row = otable.insertRow(-1);

var cell = document.createElement(”td”);

cell.innerHTML = “”;

cell.className = “XXXX”;

row.appendChild(cell);

[注] 由于俺很少使用JS直接操作表格，這個問題沒有遇見過。建議使用JS架構集來操作table，如JQuery。

30.ul和ol清單縮進問題

消除ul、ol等清單的縮進時，樣式應寫成：list-style:none;margin:0px;padding:0px;

其中margin屬性對IE有效，padding屬性對FireFox有效。← 此句表述有誤，詳細見↓

[注] 這個問題尚未實際驗證，待驗證後再來修改。

[注]

經驗證，在IE中，設定margin:0px可以去除清單的上下左右縮進、空白以及清單編号或圓點，設定padding對樣式沒有影響；在Firefox

中，設定margin:0px僅僅可以去除上下的空白，設定padding:0px後僅僅可以去掉左右縮進，還必須設定list-style:none才

能去除清單編号或圓點。也就是說，在IE中僅僅設定margin:0px即可達到最終效果，而在Firefox中必須同時設定margin:0px、

padding:0px以及list-style:none三項才能達到最終效果。

31.CSS透明問題

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF：opacity:0.6。

[注] 最好兩個都寫，并将opacity屬性放在下面。

32.CSS圓角問題

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

[注] 圓角問題是CSS中的經典問題，建議使用JQuery架構集來設定圓角，讓這些複雜的問題留給别人去想吧。

二、IE6/IE7和Firefox對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>

以上代碼顯示的結果如下，很正常，結果相同。

當然所有這些情況也許是有合了解釋的，說不定增加某一個style的設定。

下面會在這個基礎上進行修改，修改的内容都在style中，其他代碼就不再重複寫了。

請注意，這裡的Style中用到了min-height，這個和height是不同的，min-height指定了對象的一個最小高度，當對象的子

内容高度超過這個最小高度是，這個對象會自動撐大。這是一個非常牛的style，可惜的是，在這個style和float這個同樣牛的style一起使用

的時候，就會出現各種問題。

内部一個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; }

顯示結果如下。

顯示結果如下，顯示結果如下！

顯示結果如下。:left的情況相同？

這個結果中，Firefox有點離譜了，兩個框疊在一起也就罷了，為什麼那個紅框會變大捏？而且變的大小也很詭異，不知道是按照什麼公式計算出來的。IE在這裡的顯示應當是附和标準的。

内部兩個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; float: left; }

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

顯示結果如下。

在這種情況下，Firefox的結果尚能解釋，可能是float把外層的Div也作為内層float影響的範圍，這樣内層的就不會将外層的Div撐大了。IE在這裡出現了Margin失效的情況，可以解釋為内層第二個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下試驗過，結果相同。

顯示結果如下，

這種情況下，Firefox正常了，而IE延續了前面的不正常情況。

外層是float:left，内層最後一個不再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都不用?

顯示結果如下，

IE在這裡的顯示應當是附和标準的。

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

結論

再重申一次，本文讨論的是一個比較進階的話題。如果在style中用height而不是min-height來設定高度，是不會出現以上這些問題的。不過，不用min-height就失去了div自動撐大這一個很有必要的特性。

在min-height和float:left的情況下，沒有一種完美的寫法讓Firefox和IE結果相同。不過仍然可以發現繞開的方法。

進一步試驗可以發現，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的情況相同。當對象的子内容高度超過這個最小高度是。

顯示結果如下，

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

當然所有這些情況也許是有合了解釋的，說不定增加某一個style的設定，這些問題都迎刃而解了，不過目前我還沒有找到這個設定。

關于Doctype

可惜的是，在這個style和float這個同樣牛的style一起使用的時候。

以上代碼在下面這些Doctype下試驗過，結果相同。

<!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的通用方法

關于CSS對各個浏覽器相容已經是老生常談的問題了, 網絡上的教程遍地都是.以下内容沒有太多新穎, 純屬個人總結, 希望能對初學者有一定的幫助.

一、CSS HACK

以下兩種方法幾乎能解決現今所有HACK.

1, !important

随着IE7對!important的支援, !important 方法現在隻針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)

2, IE6/IE77對FireFox

*+html 與 *html 是IE特有的标簽, firefox 暫不支援.而*+html 又為 IE7特有标簽.

注意:

*+html 對IE7的HACK 必須保證HTML頂部有如下聲明：

二、萬能 float 閉合

關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]

将以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.

三、其他相容技巧

1, FF下給 div 設定 padding 後會導緻 width 和 height 增加, 但IE不會.(可用!important解決)

2, 居中問題.

1).垂直居中.将 line-height 設定為 目前 div 相同的高度, 再通過 vertical-align: middle.( 注意内容不要換行.)

2).水準居中. margin: 0 auto;(當然不是萬能)

3, 若需給 a 标簽内内容加上 樣式, 需要設定 display: block;(常見于導航标簽)

4, FF 和 IE 對 BOX 了解的差異導緻相差 2px 的還有設為 float的div在ie下 margin加倍等問題.

5, ul 标簽在 FF 下面預設有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航标簽和内容清單)

6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自适應.

7, 關于手形光标. cursor: pointer. 而hand 隻适用于 IE.

1 針對firefox ie6 ie7的css樣式

現在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正确解釋，會導緻頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7浏覽一下，應該沒有問題了。現在寫一個CSS可以這樣：

#1 { color: #333; }

* html #1 { color: #666; }

*+html #1 { color: #999; }

那麼在firefox下字型顔色顯示為#333，IE6下字型顔色顯示為#666，IE7下字型顔色顯示為#999。

2 css布局中的居中問題

主要的樣式定義如下：

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

說明：

首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素内的内容居中；對于IE這樣設定就已經可以了。

但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV裡，你可以依次拆出多個div，

隻要在每個拆出的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 浮動ie産生的雙倍距離

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

這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以為内嵌元素模拟為塊元素 display:inline; //實作同一行排列的的效果 diplay:table;

IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果隻用寬度和高度，

正常的浏覽器裡這兩個值就不會變，如果隻用min-width和min-height的話，IE下面根本等于沒有設定寬度和高度。

比如要設定背景圖檔，這個寬度是比較重要的。要解決這個問題，可以這樣：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 頁面的最小寬度

min-width是個非常友善的CSS指令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正确。但IE不認得這個，

而它實際上把width當做最小寬度來使。為了讓這一指令在IE上也能用，可以把一個

放到 标簽下，然後為div指定一個類：

然後CSS這樣設計：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實作最小寬度。

7 清除浮動

.hackbox{ display:table; //将對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;}

或者加入:after（僞對象）,設定在對象後發生的内容，通常和content配合使用，IE不支援此僞對象，非Ie 浏覽器支援，

所 以并不影響到IE/WIN浏覽器。這種的最麻煩的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮動IE文本産生3象素的bug

左邊對象浮動，右邊采用外更新檔的左邊距來定位，右邊對象内的文本會離左邊有3px的間距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵}

HTML代碼

9 屬性選擇器(這個不能算是相容,是隐藏css的一個bug)

p[id]{}div[id]{}

這個對于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

屬性選擇器和子選擇器還是有差別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p标簽中有id的都是同樣式的.

10 IE捉迷藏的問題

當div應用複雜的時候每個欄中又有一些連結，DIV等這個時候容易發生捉迷藏的問題。

有些内容顯示不出來，當滑鼠選擇這個區域是發現内容确實在頁面。

解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。

11 高度不适應

高度不适應是當内層對象的高度發生變化時外層高度不能自動進行調節，特别是當内層對象使用

margin 或paddign 時。

例：

p對象中的内容

CSS：#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

六、CSS相容要點分析IE vs FF

CSS 相容要點：

DOCTYPE 影響 CSS 處理

FF: div 設定 margin-left, margin-right 為 auto 時已經居中, IE 不行

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

FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width

FF: 支援 !important, IE 則忽略, 可用 !important 為 FF 特别設定樣式

div 的垂直居中問題: vertical-align:middle; 将行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制内容不要換行

cursor: pointer 可以同時在 IE FF 中顯示遊标手指狀， hand 僅 IE 可以

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

使用XHTML＋CSS構架好處不少，但也确實存在一些問題，不論是因為使用不熟練還是思路不清晰，我就先把一些我遇到的問題寫在下面，省的大家四處找^^

1、在mozilla firefox和IE中的BOX模型解釋不一緻導緻相差2px解決方法：

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

注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識别，但别的浏覽器可以識别。是以在IE下其實解釋成這樣：

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

重複定義的話按照最後一個來執行，是以不可以隻寫margin:XXpx!important;

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

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

，關于這個是什麼我也不太明白，隻知道IE5和firefox都支援但IE6不支援，如果有人了解的話，請告訴我一聲，謝了！：）

3、ul标簽在Mozilla中預設是有padding值的,而在IE中隻有margin有值是以先定義

ul{margin:0;padding:0;}

就能解決大部分問題

4、關于腳本，在xhtml1.1中不支援language屬性，隻需要把代碼改為

< type="text/java">

就可以了

七、10個你未必知道的CSS技巧

1、CSS字型屬性簡寫規則

一般用CSS設定字型屬性是這樣做的：

font-weight:bold;

font-style:italic;

font-varient:small-caps;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

但也可以把它們全部寫到一行上去：

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

真不錯！隻有一點要提醒的：這種簡寫方法隻有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用預設值，這點要記上。

2、同時使用兩個類

一般隻能給一個元素設定一個類（Class），但這并不意味着不能用兩個。事實上，你可以這樣：

…

同時給P元素兩個類，中間用空格格開，這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有沖突的話，後設定的起作用，即在CSS檔案中放在後面的類的屬性起作用。

補充：對于一個ID，不能這樣寫

…

也不能這樣寫

3、CSS border的預設值

通常可以設定邊界的顔色，寬度和風格，如：

border: 3px solid #000

這位把邊界顯示成3像素寬，黑色，實線。但實際上這裡隻需要指定風格即可。

如果隻指定了風格，其他屬性就會使用預設值。一般地，Border的寬度預設是medium，一般等于3到4個像素；預設的顔色是其中文字的顔色。如果這個值正好合适的話，就不用設那麼多了。

4、CSS用于文檔列印

許多網站上都有一個針對列印的版本，但實際上這并不需要，因為可以用CSS來設定列印風格。

也就是說，可以為頁面指定兩個CSS檔案，一個用于螢幕顯示，一個用于列印：

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

但應該在列印 CSS中寫什麼東西呢？你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個指令來關掉一些裝飾圖檔，再關掉一些導航按鈕。要想了解更多，可以看“列印差異”這一篇。

5、圖檔替換技巧

一般都建議用标準的HTML來顯示文字，而不要使用圖檔，這樣不但快，也更具可讀性。但如果你想用一些特殊字型時，就隻能用圖檔了。

比如你想整個賣東西的圖示，你就用了這個圖檔：

這當然可以，但對搜尋引擎來說，和正常文字相比，它們對alt裡面的替換文字幾乎沒有興趣這是因為許多設計者在這裡放許多關鍵詞來騙搜尋引擎。是以方法應該是這樣的：

Buy widgets

但這樣就沒有特殊字型了。要想達到同樣效果，可以這樣設計CSS：

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height換成真的圖檔的高度。這裡，圖檔會當作背景顯示出來，而真正的文字由于設定了-2000像素這個縮進，它們會出現在螢幕左邊2000點的地方，就看不見了。但這對于關閉圖檔的人來說，可能全部看不到了，這點要注意。

6、CSS box模型的另一種調整技巧

這個Box模型的調整主要是針對IE6之前的IE浏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：

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

這樣調用它：

…

這時盒子的全寬應該是150點，這在除IE6之前的IE浏覽器之外的所有浏覽器上都是正确的。但在IE5這樣的浏覽器上，它的全寬仍是100點。可以用以前人發明的Box調整方法來處理這種差異。

但用CSS也可以達到同樣的目的，讓它們顯示效果一緻。

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

這樣調用：

…

這樣，不管什麼浏覽器，寬度都是150點了。

7、塊元素居中對齊

如果想做個固定寬度的網頁并且想讓網頁水準居中的話，通常是這樣：

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

你會使用

來圍上所有元素。這很簡單，但不夠好，IE6之前版本會顯示不出這種效果。改CSS如下：

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

這會把網頁内容都居中，是以在Content中又加入了

text-align: left 。

8、用CSS來處理垂直對齊

垂直對齊用表格可以很友善地實作，設定表格單元 vertical-align: middle 就可以了。但對CSS來說這沒用。如果你想設定一個導覽列是2em高，而想讓導航文字垂直居中的話，設定這個屬性是沒用的。

CSS方法是什麼呢？對了，把這些文字的行高設為 2em：line-height: 2em ，這就可以了。

9、CSS在容器内定位

CSS的一個好處是可以把一個元素任意定位，在一個容器内也可以。比如對這個容器：

#container { position: relative }

這樣容器内所有的元素都會相對定位，可以這樣用：

…

如果想定位到距左30點，距上5點，可以這樣：

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

當然，你還可以這樣：

margin: 5px 0 0 30px

注意4個數字的順序是：上、右、下、左。當然，有時候定位的方法而不是邊距的方法更好些。

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

在垂直方向是進行控制是CSS所不能的。如果你想讓導航欄和内容欄一樣直通到頁面底部，用表格是很友善的，但如果隻用這樣的CSS：

#navigation { background: blue; width: 150px }

較短的導覽列是不會直通到底部的，半路内容結束時它就結束了。該怎麼辦呢？

不幸的是，隻能采用欺騙的手段了，給這較短的一欄加上個背景圖，寬度和欄寬一樣，并讓它的顔色和設定的背景色一樣。

body { background: url(/blog/blue-image.gif) 0 0 repeat-y }

此時不能用em做機關，因為那樣的話，一旦讀者改變了字型大小，這個花招就會露餡，隻能使用px。

四、最常用的12種CSS BUG解決方法與技巧

CSS bug是布局中最頭疼的問題。我們需要兼顧各種浏覽器，以期待獲得一緻的效果。非常遺憾的是各廠商之間的競争導緻很多問題的存在。而IE6與IE7在很多問題上也存在着很大的差别。在52CSS.com大量的技術文檔中，也包含了這方面的内容。輕松的解決CSS bug是我們必須掌握的技能。現在整理出最常用的12種CSS BUG解決方法以及CSS BUG類的小技巧。希望對您的學習、工作有所幫助，如果您依然有疑問，歡迎您到52CSS.com查閱、搜尋相關内容。

一、 針對浏覽器的選擇器

這些選擇器在你需要針對某款浏覽器進行css設計時将非常有用。

IE6及其更低版本 * html {} IE7及其更低版本 *:first-child+html {} * html {} 僅針對IE7 *:first-child+html {} IE7和當代浏覽器 html>body{} 僅當代浏覽器(IE7不适用) html>body{} Opera9及其更低版本 html:first-child {} Safari html[xmlns*=""] body:last-child {}

要使用這些選擇器,請将它們放在樣式之前. 例如:

#content-box { width: 300px; height: 150px; }

四、給行内元素定義寬度

如果你給一個行内元素定義寬度,那麼它隻是在IE6下有效. 所有的HTML元素要麼是行内元素要麼就好是塊元素. 行内元素包括：<span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定義行内元素的寬度, 為了解決這個問題你可以将行内元素轉變為塊元素。

span { width: 150px; display: block }

五、讓固定寬度的頁面居中

為了讓頁面在浏覽器居中顯示, 需要相對定位外層div, 然後把margin設定為auto.

#wrapper { margin: auto; position: relative; }

六、IE6雙倍邊距的bug

給此對象加上display:inline即可解決問題。

七、Box Model 盒模型bug的一般解決辦法

八、兩個層之間的3px間隙

九、在IE中的HTML注釋引起文字奇怪的複制

十、圖檔替換技術

文字總比用圖檔做标題好一些. 文字對螢幕閱讀機和SEO都是非常友好的.

HTML: <h1><span>Main heading one</span></h1> CSS: h1 { background: url(heading-image.gif) no-repeat; } h1 span { position:absolute; text-indent: -5000px; }

你可以看到我們對标題使用了标準的<h1>作為标簽并且用css來将文本替換為圖檔. text-indent屬性将文字推到了浏覽器左邊5000px處, 這樣對于浏覽者來說就看不見了.

關掉css,然後看看頭部會是什麼！

十一、 最小寬度

　　

IE6另外一個bug就是它不支援 min-width 屬性. min-width又是相當有用的, 特别是對于彈性模闆來說, 它們有一個100%的寬度,min-width 可以告訴浏覽器何時就不要再壓縮寬度了。

除IE6以外所有的浏覽器你隻需要一個 min-width: Xpx; 例如:

.container { min-width:300px; }

為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時候我們需要建立兩個div, 一個包含另一個:

<div class="container"> <div class="holder">Content</div> </div>

然後你需要定義外層div的min-width屬性

.container { min-width:300px; }

這時該是IE hack大顯身手的時候了. 你需要包含如下的代碼:

* html .container { border-right: 300px solid #FFF; } * html .holder { display: inline-block; position: relative; margin-right: -300px; }

As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.

十二、隐藏水準滾動條

為了避免出現水準滾動條, 在body裡加入 overflow-x:hidden 。

當你決定使用一個比浏覽器視窗大的圖檔或者flash時, 這個技巧将非常有用。