css部分：
IE6 IE7 IE8 Firefox Chrome Safari
!important Y Y
_ Y
* Y Y
*+ Y
\9 Y Y Y
\0 Y
nth-of-type(1) Y Y
示例代碼：
#test{
color:red; /* 所有瀏覽器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
1、CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
FF：opacity:0.6
2、cursor:hand VS cursor:pointer
FF不支持hand，但ie支持pointer
解決方法: 統(tǒng)一使用pointer
3、padding 問(wèn)題
padding 5px 4px 3px 1px FireFox無(wú)法解釋簡(jiǎn)寫(xiě),
必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
4、消除ul/ol等列表的縮進(jìn)時(shí)
樣式應(yīng)寫(xiě)成:list-style:none;margin:0px;padding:0px;
其中margin屬性對(duì)IE有效，padding屬性對(duì)FireFox有效
5、CSS圓角
IE：不支持圓角
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;
6、CSS雙線凹凸邊框
IE：border:2px outset;
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
7、table邊框
.ctb {
border-top: 1px solid #3E4093;
border-left: 1px solid #3E4093;
border-right: 0px;
border-bottom: 0px;
}
.ctb td{
border-top: 1px solid #F4F4FF;
border-left: 1px solid #F4F4FF;
border-right: 1px solid #3E4093;
border-bottom: 1px solid #3E4093;
}
-------------------------------------------------------------------------------------------------------------------------------------------
js部分：
1、window.event
function gotoSubmit(e) {
e = e? e : (window.event ? window.event : null);
}
2、IE：interText ；FF：interHTML或者textContent
3、獲取鼠標(biāo)位置：
在IE 中，event 對(duì)象有 x, y 屬性，F(xiàn)F中沒(méi)有。
在FF中，與event.x 等效的是 event.pageX。但event.pageX IE中沒(méi)有。
解決方法：mX = event.clientX ? event.clientX : event.pageX;
4、event.srcElement問(wèn)題
說(shuō)明:IE下,even對(duì)象有srcElement屬性,但是沒(méi)有target屬性;Firefox下,even對(duì)象有target屬性,但是沒(méi)有 srcElement屬性.
解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來(lái)代替IE下的event.srcElement或者Firefox
下的event.target.
或者
if(document.all)
{
obj = event.srcElement ;
}
else
{
obj = arguments[0].target;
}
5、window.location.href問(wèn)題
說(shuō)明:IE或者Firefox2.0.x下,可以使用window.location或 window.location.href;Firefox1.5.x下,只能使用window.location.
解決方法:使用window.location來(lái)代替window.location.href.
6、模態(tài)和非模態(tài)窗口問(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 parWin = window.opener;
parWin.document.getElementById("Aqing").value = "Aqing";
7、FF中類似 obj.style.height = imgObj.height 的語(yǔ)句無(wú)效
解決方法：
obj.style.height = imgObj.height + 'px';
8、捕獲事件
if (document.all)
window.document.attachEvent("onclick",gorush);
else
window.document.addEventListener("click",gorush,false)
9、判斷瀏覽器類型：
var isIE=document.all? true:false;
10、
如果在frame標(biāo)簽中書(shū)寫(xiě)了以下屬性：
<frame src="/xx.htm" id="frameId" name="frameName" />
那么ie可以通過(guò)id或者name訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象
而FF只可以通過(guò)name來(lái)訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象
例如如果上述frame標(biāo)簽寫(xiě)在最上層的window里面的htm里面，那么可以這樣訪問(wèn)
IE： window.top.frameId或者window.top.frameName來(lái)訪問(wèn)這個(gè)window對(duì)象
FF： 只能這樣window.top.frameName來(lái)訪問(wèn)這個(gè)window對(duì)象
另外，在FF和ie中都可以使用window.top.document.getElementById("frameId")來(lái)訪問(wèn)frame標(biāo)簽
并且可以通過(guò)window.top.document.getElementById("testFrame").src = 'xx.htm'來(lái)切換frame的內(nèi)容
也都可以通過(guò)window.top.frameName.location = 'xx.htm'來(lái)切換frame的內(nèi)容
11、父結(jié)點(diǎn)的問(wèn)題
在FF中沒(méi)有 parentElement parentElement.children 而用 parentNode parentNode.childNodes
childNodes的下標(biāo)的含義在IE和FF中不同，F(xiàn)F使用DOM規(guī)范，childNodes中會(huì)插入空白文本節(jié)點(diǎn)。
一般可以通過(guò)node.getElementsByTagName()來(lái)回避這個(gè)問(wèn)題。當(dāng)html中節(jié)點(diǎn)缺失時(shí)，IE和FF對(duì)parentNode的解釋不同，例如
<form>
<table>
<input/>
</table>
</form>
FF中input.parentNode的值為form, 而IE中input.parentNode的值為空節(jié)點(diǎn)
FF中節(jié)點(diǎn)沒(méi)有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)
12、自定義屬性問(wèn)題
說(shuō)明:IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;FF下,只能使用
getAttribute()獲取自定義屬性.
解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.
13、事件委托方法
IE：document.body.onload = inject; //Function inject()在這之前已被實(shí)現(xiàn)
FF：document.body.onload = inject();
如果要加傳遞參數(shù)，可以做個(gè)閉包
(function(arg){
document.body.onload=function(){inject(arg);};
})(arg)
14、css"float"屬性
IE：document.getElementById("header").style.styleFloat = "left";
FF：document.getElementById("header").style.cssFloat = "left";
15、獲取label標(biāo)簽“for”屬性
IE：
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
FF：
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
對(duì)于 setAtrribute 方法來(lái)說(shuō)也是同樣的語(yǔ)法。
16、獲取視窗或?yàn)g覽器窗口的尺寸
IE ：
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
FF：
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;
17、設(shè)置濾鏡：
IE：
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";
FF：
var myObject = document.getElementById("myElement");
myObject.style.opacity = "0.5";
18、.在取得網(wǎng)頁(yè)窗口區(qū)域和獲取滾動(dòng)條位移距離時(shí)也要用document.documentElement
即這四個(gè)屬性（clientWidth、 clientHeight、scrollLeft、scrollTop）一定要用document.documentElement
但是 document.body.appendChild()和document.body.removeChild()卻是可以用的，而且用 document.documentElement.appendChild()和 document.documentElement.removeChild()代替卻會(huì)報(bào)錯(cuò)；
總結(jié)了一下僅 clientWidth、clientHeight、scrollLeft、scrollTop和 document.documentElement.style時(shí)才用document.documentElement
19、body問(wèn)題
Firefox的body在body標(biāo)簽沒(méi)有被瀏覽器完全讀入之前就存在；而IE的body則必須在body標(biāo)簽被瀏覽器完全讀入之后才存在.
例如：
FF：
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
20、幻燈片效果
if(document.all){
filters[0].Apply();
document.getElementById(imageid).src=path;//更換圖片
filters[0].play();
}
else{
firfoxPlays(path,imageid)
}
var intTimeStep=20;
var intAlphaStep=0.04;
var curSObj=null;
var curOpacity=null;
function firfoxPlays(path,imageid) {
curSObj=document.getElementById(imageid);
curSObj.style.opacity=0;
curSObj.src=path;
curOpacity=0;
setObjOpen();
}
function setObjOpen() {
curOpacity+=intAlphaStep;
curSObj.style.opacity =curOpacity;
if (curOpacity<1) {
setTimeout('setObjOpen()',intTimeStep);
}
}
21、offsetLeft問(wèn)題
var amount=7;//每次移動(dòng)7（速度）
if(!document.all) {
var f=document.getElementById(flashDiv);
f.style.left=(f.offsetLeft-amount )+'px';
}
else{
document.getElementById(flashDiv).style.pixelLeft -= amount;
}
22、判斷瀏覽器
if (navigator.userAgent.indexOf("Firefox") > -1)
其他同理
23、document.documentElement.scrollTop
在safari和chrome下為 document.documentElement.scrollTop+document.body.scrollTop
24、//聚焦控件后把光標(biāo)放到最后
function getSelectPos(obj)
{
var esrc = document.getElementById(obj);
if(esrc==null)
{
if(document.all)
{
esrc = event.srcElement ;
}
else
{
esrc = arguments[0].target;
}
}
window.setTimeout(function(){esrc.focus();},0);
}
