带来一篇IE和Firefox扫瞄器CSS网页结构分歧点
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。我们会商的主题CSS网页结构，最令人人头疼的成绩就是扫瞄器兼容性，固然poluoluo.com先容过良多这偏向的常识，但仍然让良多开辟职员蒙头转向，明天的这篇文章，将列出css和javascript在IE和Firefox中二十三个分歧点，但愿对人人的进修有所匡助。
1、document.formName.item("itemName")成绩
成绩申明：IE下，可使用document.formName.item("itemName")或document.formName.elements["elementName"]；Firefox下，只能利用document.formName.elements["elementName"]。
办理办法：一致利用document.formName.elements["elementName"]。
2、汇合类工具成绩
成绩申明：IE下，可使用()或[]猎取汇合类工具；Firefox下，只能利用[]猎取汇合类工具。
办理办法：一致利用[]猎取汇合类工具。
3、自界说属性成绩
成绩申明：IE下，可使用猎取惯例属性的办法来猎取自界说属性，也能够利用getAttribute()猎取自界说属性；Firefox下，只能利用getAttribute()猎取自界说属性。
办理办法：一致经由过程getAttribute()猎取自界说属性。
4、eval("idName")成绩
成绩申明：IE下，可使用eval("idName")或getElementById("idName")来获得id为idName的HTML工具；Firefox下，只能利用getElementById("idName")来获得id为idName的HTML工具。
办理办法：一致用getElementById("idName")来获得id为idName的HTML工具。
5、变量名与某HTML工具ID不异的成绩
成绩申明：IE下，HTML工具的ID能够作为document的上司工具变量名间接利用，Firefox下则不克不及；Firefox下，可使用与HTML工具ID不异的变量名，IE下则不克不及。
办理办法：利用document.getElementById("idName")取代document.idName。最好不要取HTML工具ID不异的变量名，以削减毛病；在声明变量时，一概加上var关头字，以免歧义。
6、const成绩
成绩申明：Firefox下，可使用const关头字或var关头字来界说常量；IE下，只能利用var关头字来界说常量。
办理办法：一致利用var关头字来界说常量。
7、input.type属性成绩
成绩申明：IE下input.type属性为只读；可是Firefox下input.type属性为读写。
办理举措：不修正input.type属性。假如必需要修正，能够先埋没本来的input，然后在一样的地位再拔出一个新的input元素。
8、window.event成绩
成绩申明：window.event只能在IE下运转，而不克不及在Firefox下运转，这是由于Firefox的event只能在事务产生的现场利用。
办理办法：在事务产生的函数上加上event参数，在函数体内(假定形参为evt)利用varmyEvent=evt?evt:(window.event?window.event:null)
示例：
<inputtype="button"onclick="doSomething(event)"/>
<scriptlanguage="javascript">
functiondoSomething(evt){
varmyEvent=evt?evt:(window.event?window.event:null)
...
}
9、event.x与event.y成绩
成绩申明：IE下，even工具有x、y属性，可是没有pageX、pageY属性；Firefox下，even工具有pageX、pageY属性，可是没有x、y属性。
办理办法：varmyX=event.x?event.x:event.pageX;varmyY=event.y?event.y:event.pageY;
假如思索第8条成绩，就改用myEvent取代event便可。
10、event.srcElement成绩
成绩申明：IE下，even工具有srcElement属性，可是没有target属性；Firefox下，even工具有target属性，可是没有srcElement属性。
办理办法：利用srcObj=event.srcElement?event.srcElement:event.target;
假如思索第8条成绩，就改用myEvent取代event便可。
11、window.location.href成绩
成绩申明：IE大概Firefox2.0.x下，可使用window.location或window.location.href；Firefox1.5.x下，只能利用window.location。
办理办法：利用window.location来取代window.location.href。固然也能够思索利用location.replace()办法。
12、模态和非模态窗口成绩
成绩申明：IE下，能够经由过程showModalDialog和showModelessDialog翻开模态和非模态窗口；Firefox下则不克不及。
办理办法：间接利用window.open(pageURL,name,parameters)体例翻开新窗口。
假如必要将子窗口中的参数传送回父窗口，能够在子窗口中利用window.opener来会见父窗口。假如必要父窗口把持子窗口的话，利用varsubWindow=window.open(pageURL,name,parameters);来取得新开的窗口工具。
十3、frame和iframe成绩
以上面的frame为例：
<framesrc="http://www.poluoluo.com/123.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="poluoluo.com.html"或window.frameName.location="poluoluo.com.html"来切换frame的内容；
假如必要将frame中的参数传回父窗口，能够在frame中利用parent关头字来会见父窗口。
十4、body载进成绩
成绩申明：Firefox的body工具在body标签没有被扫瞄器完整读进之前就存在；而IE的body工具则必需在body标签被扫瞄器完整读进以后才存在。
[注]这个成绩还没有实践考证，待考证后再来修正。
[注]履历证，IE6、Opera9和FireFox2中不存在上述成绩，纯真的JS剧本能够会见在剧本之前已载进的一切工具和元素，即便这个元素还没有载进完成。
十5、事务托付办法
成绩申明：IE下，利用document.body.onload=inject;个中functioninject()在这之前已被完成；在Firefox下，利用document.body.onload=inject();
办理办法：一致利用document.body.onload=newFunction(inject());大概document.body.onload=function(){/*这里是代码*/}
[注重]Function和function的区分
十6、会见的父元素的区分
成绩申明：在IE下，利用obj.parentElement或obj.parentNode会见obj的父结点；在firefox下，利用obj.parentNode会见obj的父结点。
办理办法：由于firefox与IE都撑持DOM，因而一致利用obj.parentNode来会见obj的父结点。
十7、cursor:handVScursor:pointer
成绩申明：firefox不撑持hand，但ie撑持pointer，二者都是手形唆使。
办理办法：一致利用pointer。
十8、innerText的成绩.
成绩申明：innerText在IE中能一般事情，可是innerText在FireFox中却不可。
办理办法：在非IE扫瞄器中利用textContent取代innerText。
示例：
if(navigator.appName.indexOf("Explorer")>-1){
document.getElementById(element).innerText="mytext";
}else{
document.getElementById(element).textContent="mytext";
}
[注]innerHTML同时被ie、firefox等扫瞄器撑持，其他的，如outerHTML等只被ie撑持，最好不必。
十9、工具宽高赋值成绩
成绩申明：FireFox中相似obj.style.height=imgObj.height的语句有效。
办理办法：一致利用obj.style.height=imgObj.height+px;
二10、Table操纵成绩
成绩申明：ie、firefox和别的扫瞄器关于table标签的操纵都各不不异，在ie中不同意对table和tr的innerHTML赋值，利用js增添一个tr时，利用appendChild办法也不论用。
办理办法：
//向table追加一个空行：
varrow=otable.insertRow(-1);
varcell=document.createElement("td");
cell.innerHTML="";
cell.className="XXXX";
row.appendChild(cell);
[注]因为俺很少利用JS间接操纵表格，这个成绩没有碰见过。倡议利用JS框架集来操纵table，如JQuery。
二1、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三项才干到达最后的效果。
二2、CSS通明成绩
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注]最好两个都写，并将opacity属性放鄙人面。
二3、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框架集来设置圆角，让这些庞大的成绩留给他人往想吧。
关于CSS中的成绩其实太多了，乃至一样的CSS界说在分歧的页面尺度中的显现效果都是纷歧样的。更多的常识请参考poluoluo.com的文章。一个符合开展的倡议是，页面接纳尺度DHTML尺度编写，较少利用table，CSS界说只管按照尺度DOM，同时分身IE、Firefox、Opera等支流扫瞄器。BTW，良多情形下，FF和Opera的CSS注释尺度更切近CSS尺度，也更具有标准性。
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 可以使用 CSS 检查工具进行设计。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
页:
[1]