社区 › Dreamweav(DW) › DIV教程之前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩

爱飞 发表于 2015-1-15 23:17:27

DIV教程之前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩

更好的控制页面布局。不用多说。
破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.
ie和火狐兼容成绩
1.document.form.item成绩
(1)现有成绩：
现有代码中存在很多document.formName.item("itemName")如许的语句，不克不及在Firefox(火狐)下运转
(2)办理办法：
改用document.formName.elements["elementName"]
2.汇合类工具成绩
(1)现有成绩：
现有代码中很多汇合类工具取用时利用()，IE能承受，Firefox(火狐)不克不及。
(2)办理办法：
改用[]作为下标运算。如：
<P>又如：

<P>
3.window.event

(1)现有成绩：
利用window.event没法在火狐扫瞄器上运转
(2)办理办法：
火狐的event只能在事务产生的现场利用，此成绩暂没法办理。能够如许变通：
原代码(可在IE中运转)：
<P>新代码(可在IE和火狐中运转)：
<inputtype="button"name="someButton"value="提交"/><br/>...<br/><scriptlanguage="javascript"><br/>functiongotoSubmit(evt){<br/>evt=evt?evt:(window.event?window.event:null);<br/>...<br/>alert(evt);//useevt<br/>...<br/>}<br/></script>
别的，假如新代码中第一行不改，与老代码一样的话(即gotoSubmit挪用没有给参数)，则仍旧只能在IE中运转，但不会堕落。以是，这类计划tpl部分仍与老代码兼容。
<P>
破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.

4.HTML工具的id作为工具名的成绩
(1)现有成绩
在IE中，HTML工具的ID能够作为document的上司工具变量名间接利用。在火狐中不克不及。
(2)办理办法
用getElementById("idName")取代idName作为工具变量利用。
5.用idName字符串获得工具的成绩
(1)现有成绩
在IE中，使用eval(idName)能够获得id为idName的HTML工具，在火狐中不克不及。
(2)办理办法
用getElementById(idName)取代eval(idName)。
6.变量名与某HTML工具id不异的成绩
(1)现有成绩
在火狐中，由于工具id不作为HTML工具的称号，以是可使用与HTML工具id不异的变量名，IE中能。
(2)办理办法
在声明变量时，一概加上var，以免歧义，如许在IE中亦可一般运转。
别的，最好不要取与HTML工具id不异的变量名，以削减毛病。
7.event.x与event.y成绩
(1)现有成绩
在IE中，event工具有x,y属性，火狐中没有。
(2)办理办法
在火狐中，与event.x等效的是event.pageX。但event.pageXIE中没有。故接纳event.clientX取代event.x。在IE中也有这个变量。event.clientX与event.pageX有奇妙的不同（当全部页面有转动条的时分），不外年夜多半时分是等效的。
假如要完整一样，能够稍贫苦些：mX=event.x?event.x:event.pageX;然后用mX取代event.x
(3)别的
event.layerX在IE与火狐中都有，详细意义有没有不同还没有实验。
8.关于frame
(1)现有成绩
在IE中能够用window.testFrame获得该frame，火狐中不可
<P>
破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.

(2)办理办法
在frame的利用方面火狐和ie的最次要的区分是：
假如在frame标签中誊写了以上司性：
<P>那末ie能够经由过程id大概name会见这个frame对应的window工具而火狐只能够经由过程name来会见这个frame对应的window工具比方假如上述frame标签写在最下层的window内里的htm内里，那末能够如许会见ie：window.top.frameId大概window.top.frameName来会见这个window工具
火狐：只能如许window.top.frameName来会见这个window工具
别的，在火狐和ie中都可使用window.top.document.getElementById("frameId")来会见frame标签而且能够经由过程window.top.document.getElementById("testFrame").src=xx.htm来切换frame的内容也都能够经由过程window.top.frameName.location=xx.htm来切换frame的内容关于frame和window的形貌能够拜见bbs的‘window与frame’文章和/test/js/test_frame/目次上面的测试
9.在火狐中，本人界说的属性必需getAttribute()获得
10.在火狐中没有parentElementparement.children而用
parentNodeparentNode.childNodeschildNodes的下标的寄义在IE和火狐中分歧，火狐利用DOM标准，childNodes中会拔出空缺文本节点。
一样平常能够经由过程node.getElementsByTagName()往返避这个成绩。
当html中节点缺失机，IE和火狐对parentNode的注释分歧，比方
<form>
<table>
<input/>
</table>
</form>
火狐中input.parentNode的值为form,而IE中input.parentNode的值为空节点
火狐中节点没有removeNode办法，必需利用以下办法node.parentNode.removeChild(node)
11.const成绩
(1)现有成绩:
在IE中不克不及利用const关头字。如constconstVar=32;在IE中这是语法毛病。
(2)办理办法:
不利用const，以var取代。
12.body工具
火狐的body在body标签没有被扫瞄器完整读进之前就存在，而IE则必需在body完整被读进以后才存在
<P>
破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.

13.urlencoding
在js中假如誊写url就间接写&不要写&比方varurl=xx.jsp?objectName=xx&objectEvent=xxx;frm.action=url那末很有大概url不会被一般显现以致于参数没有准确的传到服务器一样平常会服务器报错参数没有找到固然假如是在tpl中破例，由于tpl中切合xml标准，请求&誊写为&一样平常火狐没法辨认js中的&
14.nodeName和tagName成绩
(1)现有成绩：
在火狐中，一切节点均有nodeName值，但textNode没有tagName值。在IE中，nodeName的利用好象有成绩（详细情形没有测试，但我的IE已逝世了好几回）。
(2)办理办法：
利用tagName，但应检测其是不是为空。
15.元素属性
IE下input.type属性为只读，可是火狐下能够修正
16.document.getElementsByName()和document.all的成绩
(1)现有成绩：
在IE中，getElementsByName()、document.all均不克不及用来获得div元素（是不是另有别的不克不及取的元素还不晓得）。
17.最复杂的鼠标移过手变型的css要改了
cursor:pointer;/*ff不撑持cursor:hand*/dw8上面主动出来的也没有hand这个属性了，尺度的是pointer
18.ff不撑持滤镜最多见的半通明不撑持。

filter:Alpha(Opacity=50);/*forIE*/
opacity:.5;/*forFirefox*/
style="-moz-opacity:0.5;filter:alpha(opacity=50);cursor:hand;"
19.ff不撑持expression比方往失落链接的边框要分离写分歧的css

a,area{blr:expression(this.onFocus=this.blur())}/*forIE*/
:focus{outline:none;}/*forFirefox*/
20.ff不撑持div转动条的色彩设置，今朝还没有找到交换的好办法。

.contendiv{
position:absolute;left:0px;top:10px;width:580px;height:135px;
line-height:120%;text-align:left;font-family:"宋体";word-break:break-all;color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR:red;SCROLLBAR-TRACK-COLOR:F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
这个在ff内里完整没无效果了。
<P>
破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.

21.ie上面显现在笔墨上面横线的
border-width:0px0px1px0px;在ff内里跑到笔墨下面往了。（查了手册仍是没有找到办理的举措感到莫名奇奥～～本来是ff的容错才能太差了，是上面的width:186px;height:0px;宽高引发的，实在a:haver已承继了下级的属性了，只需界说分歧的款式就能够了，看来ff有助于制造尺度化，简便化的网页啊，对css的了解也更深入，对供应css来讲是个很好的匡助）

.onelinksdiva:hover{
display:block;border-style:solid;color:#ff0000;border-width:0px0px1px0px;
/*
display:block;border-style:solid;border-width:0px0px1px0px;width:186px;height:0px;color:#ff0000;font-size:14px;text-align:right;
*/
}
//上面的写法在ie上面一般，但在ff下是毛病的
.onelinksdiva:hover{
display:block;border:#ff0000solid;border-width:0px0px1px0px;
width:186px;height:0px;color:#ff0000;font-size:14px;text-align:right;
}
相干参考材料：

border-width:border-top-widthborder-right-widthborder-bottom-widthborder-left-width;p#fourborders
{
border-width:thickmediumthin12px;
}
假如界说四个值,那末这四个值就分离是上,右,下,右边框的宽度值(从上边框入手下手,以逆时针的按次遍历).
等价于上面的界说

p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
22.ff不撑持<bodyscroll="no">scroll属性
必需界说overflow:hidden;并且要在html标签下，不克不及在body下

html{
overflow:hidden;
}
<P>
破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.

23.ff不撑持数据岛绑定
<xmlid="news"src="news.xml"></xml>在ie下能够加载进数据，但到了火狐就加载不进数据了，入手下手觉得多是由于内容行笔墨太多招致不克不及断行不克不及加载，但删除只剩几个字今后一样不可。
24.style="word-break:break-all"
在网页中的单位格里的内容超越一行时,在ie扫瞄器里界说的换行款式可以一般使用,但在firefox里却不克不及被撑持了.style="word-break:break-all"是MS扩大的IE专有属性，并未成为W3C尺度，因此Firefox还不克不及撑持它。不外MS已将其提交到了W3C，而在W3C的CSS3的候选计划中也能看到它。但愿这个属性在被W3C终极定案的为CSS3尺度后，Firefox能够撑持吧。这之前，能够尝尝
style="table-layout:fixed;word-wrap:break-word"（当它是英文的时分就不克不及一般换行了）
25.今朝FF2.0为止都不撑持IE的name锚点
像这类写法都是不撑持的：<ahref="###">goback</a>
本来依据W3C的语法，<a>标签一直城市查找href地点并跳转已往，如今onclick事务与###这个地点又有抵触。
为了让Firefox与IE部分元素属性兼容，谁人费力，我偶然中发明Firefox对空格敏感：
<a>//有空格，锚点感化
<a>//无空格，锚点无感化
锚点的写法又非常考究，好比<aname=#1>，Firefox不撑持锚点，得加上id=#1
静态同页面援用时必需如许写：<ahref="#1"></a>，<ahref="static.html#1"></a>就不可，静态页面要用JS
后遗症来了，思索到鼠标款式和扫瞄器兼容又入手下手折腾：

<ahref="###">//不兼容
<ahref="javascript:;">//不兼容
<ahref="javascript:function();">//没有{...},属于剧本的不法誊写
<astyle="cursor:hand">//没照应到自界说体系鼠标款式的用户
<ahref="javascript:">//形态栏会展现，href有多长显现多长
<ahref=#>//我用的
26.ff火狐上面不撑持document.all属性
必须用document.getElementById(idName);
以下是我的动画切换效果，在ie下一般，到了火狐内里就不动了，修正后能够切换图片但渐隐渐现的效果就没有了。缘故原由是火狐不撑持滤镜filter,只好用半通明的div来完成了。

/*
companypage
*/
functionplaycompanyimg()
{
window.setInterval(changecompanyimg();,interval);
}
functionchangecompanyimg()
{
/*
火狐上面不撑持document.all属性的，必须用document.getElementById(idName);
*/
//if(document.all)
//{
/**
以下两句是在切换效果前切换背景图片的代码，number、image和idtemp要设置全局变量才能够
*/
number=Math.floor(Math.random()*image.length);
idtemp.src=image;
//alert(number+"ii"+idtemp.src)
/**
以下两句是完成幻灯片切换效果的
*/
//alert(do_transition);
//document.all.companyimg.style.filter="progid:
DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";
/*
document.all.companyimg.style.filter="progid:
DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
document.all.companyimg.filters.Apply();
document.all.companyimg.filters.Play();
*/
varcompanyimgidtmep=document.getElementById(companyimg);
companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
companyimgidtmep.filters.Apply();
companyimgidtmep.filters.Play();
//}
}
参考材料：
中心：FILTER:revealTrans(duration=1,transition=23);一个IE滤镜

<P>
破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.

在别的的非IE扫瞄器固然不撑持这个滤镜，可是撑持通明滤镜的，你能够分一下，IE下持续利用你这个效果，而在非IE扫瞄器下用通明滤镜：
style.opacity
opacity=0.5CSS3
style.MozOpacity
-moz-opacity:0.5Mozilla里同等下面这个滤镜这个滤镜也合用于Netscape
style.KHTMLOpacity
-khtml-opacity:0.5Safari里的通明滤镜。
IE：
obj.filters.alpha.opacity
tomeizz(梅花雪)
实在我想过你谁人成绩的。可是通明opacity这个他不是一个突变的历程。一样平常这类图片过分殊效最多延续一秒把，最多最多两秒duration=2凌驾2秒就很包袱，鹊巢鸠占了。
在2秒钟内里完成
g_img.style.filter="alpha(opacity="+i+")"通明度的变更是对照包袱的事变。要用window.setInterval改动i的值，并且还要挪用几十上百次window.setInterval
才干看到效果。
如许的话，我以为得不赔掉，是为了殊效而殊效了
别的一种思索是，究竟非ie扫瞄器是多数，即便在ff下没有图片过分殊效，实在也没甚么，仍是很流利，不外就是看不到ie内里的美罢了。
27.ff下链接的onclick事务不起感化
<divid="bigwhatwedo"><ahref="javascript:onclick=display(whatwedo)"target="">我们做甚么</a></div>在ie下没有成绩，在ff下点击了没有反响。作了屡次实验，换成仍旧不可，厥后经由过程屡次检查，搜刮仍旧找不到路径，最初接纳习用的办法－－一步一步alert();出来看效果，本来是一个id的值写错了，但奇异的是ie上面没有干系？是ie的容错内容太强了仍是火狐的容错内容太差了？不外仍是喜好火狐的松散和尺度哈。可让人发明很多深条理的器材。哈哈。
28.ff中div定位不克不及经由过程js初始化
必需先设定值而且要设定器度单元top:80px;left:212px;


破洛洛文章简介：前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩.

29.ff不克不及用.click();办法翻开链接，终究临时性的办理了

<div><ahref="#"id="a3_a">hello</a></div>
<div>
<ahref=""onclick="test2(1)"id="b3">hello2</a></div>
<div><ahref="javascript:onclick=test2(1)"id="b3">hello3</a>触发事务放在href="javascript:onclick=test2(1)"内里ff有效</div>
<divid="b3">hello3</div>
<scriptlanguage="javascript">
<!--
functiontest1(num)
{
window.alert(num);
}
functiontest2(num)
{
varaaa_a=document.getElementById("a3_a");
if(document.all){//if(getOs()=="MSIE"){//IE的处置
aaa_a.click();
}
else
{
varevt=document.createEvent("MouseEvents");
evt.initEvent("click",true,true);
aaa_a.dispatchEvent(evt);
}
}
/*
判别扫瞄器范例
*/
functiongetOs()
{
varOsObject="";
if(navigator.userAgent.indexOf("MSIE")>0){
return"MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return"Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0){
return"Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return"Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return"Gecko";
}
}
//--></script>
<!--因为这里的链接是index的iframe用href="#"在ie中没法一般显现，而用href="javascript:onclick=display(whatwedo)"的体例火狐不撑持翻开第一个链接，火狐必需用
本觉得火狐扫瞄器利用的人良多，但从网站的统计剖析来看火狐只要不幸的3.18%，但兼容他的尺度确消费很多精神！不外尺度化有益于今后的保护和扩大，有益于手艺的不休提醒。
-->
30.OVERFLOW-Y:auto;OVERFLOW-X:hidden
在ie内里能够用no暗示埋没，但在ff内里必需用hidden
总结一下：今朝有十个不兼容成绩，还没办理的有：
1.ff不撑持div转动条的色彩设置，今朝还没有找到交换的好办法，在很多尺度化的网站看到也是没有办理这个成绩。
2.ff不撑持数据岛绑定<xmlid="news"src="news.xml"></xml>在ie下能够加载进数据，但到了火狐就加载不进数据了，入手下手觉得多是由于内容行笔墨太多招致不克不及断行不克不及加载，但删除只剩几个字今后一样不可。用w3c代码检测软件检测了一下，本来是自界说的xml标签通不外，以是火狐就不认了。
3.火狐不撑持滤镜filter，没法完成图片切换两头变更的效果，只能经由过程通明度来设置，但很贫苦.（这个今朝暂不完成了）

<framesrc="xx.htm"id="frameId"name="frameName"/>

<br/><inputtype="button"name="someButton"value="提交"/><br/>...<br/><scriptlanguage="javascript"><br/>functiongotoSubmit(){<br/>...<br/>alert(window.event);//usewindow.event<br/>...<br/>}<br/></script>


document.getElementsByName("inputName")(1)改成document.getElementsByName("inputName")

document.forms("formName")改成document.forms["formName"]。




相干链接：
最新辨别兼容IE6/IE7/IE8/IE9/FF的CSSHACK写法
最新ie6/ie7/ie8/ie9版本的Cssifhack前提语法操纵申明
前端计划IE6/IE7/IE8/IE9/FF成绩汇总
各类CSSbug与技能
【收拾】网页计划制造步骤流程技能经常使用素材和JS殊效（连续更新...）


搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

小魔女 发表于 2015-1-17 21:33:44

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只想知道 发表于 2015-1-24 15:11:26

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

山那边是海 发表于 2015-2-1 20:14:18

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

冷月葬花魂 发表于 2015-2-7 16:40:22

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

爱飞 发表于 2015-2-22 20:46:38

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

金色的骷髅 发表于 2015-3-7 04:54:27

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

飘飘悠悠 发表于 2015-3-14 13:54:56

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

小妖女 发表于 2015-3-21 10:46:41

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

查看完整版本: DIV教程之前端计划IE6/IE7/IE8/IE9/FF成绩汇总:IE和FirFox兼容成绩