《潭州学院》web兼容规则.doc

WEB页面兼容规则1. 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-ACode:2. FireFox下如何使连续长字段自动换行众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决Code:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaJs代码/* intLen)strTemp+=strContent.substr(0,intLen)+;strContent=strContent.substr(intLen,strContent.length);strTemp+=+strContent;obj.innerHTML=strTemp;if(document.getElementById & !document.all) toBreakWord(ff, 37);/* */3.ff下为什么父容器的高度不能自适应在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。Code:clear:both;4.IE6的双倍边距BUG浮动后本来外边距10px,但IE解释为20px,解决办法是加上Code:display: inline5. IE6下绝对定位的容器内文本无法正常选择此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:6. IE6下图片下方有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom都可以解决.7. IE6下两个层中间有间隙这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;8. list-style-image无法准确定位list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。9. LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器Code:10.web标准中定义id与class有什么区别吗一.web标准中是不容许重复ID的,比如 div id=aa 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以 使用他.二.属性的优先级问题ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.11.如何垂直居中文本将元素高度和行高设为一致。Code:12.如何对齐文本与文本输入框加上 vertical-align:middle;Code:13.FF下面不能水平居中呢FF下面设置容器的左右外补丁为auto就可以了Code:14.FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:Code:height:auto!important;height:200px;min-height:200px;15.IE6下容器的宽度和FF解释不同呢Code:web标准常见问题大全问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:ASPNETusStan.mspx?mfr=true/url16. 为什么web标准中IE无法设置滚动条颜色了解决办法是将body换成htmlCode:17. 为什么我定义的样式没有作用呢这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aaCode:web标准常见问题大全18. IE6无法定义1px左右高度的容器IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px19. 背景颜色无法显示Code:.gainlayout height: 1px; web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考解决方法之一:Code:.gainlayout height: 1px; .gainlayout height: 1px; 20. 怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明Code:21. 怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二Code:22. 图片垂直与容器内Code:或者使用背景图的办法:Code:background:url(logo.gif) center no-repeat;23. 如何让div横向排列横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.Code:web标准常见问题大全web标准常见问题大全web标准常见问题大全24 Firefox 关于DIV高度无法自适应的两种解决如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不回因为里面的内容而撑开，而IE中就会自动根据内容撑开解决方案：1、在DIV内部的最后追加clear:both样式Jmedia D2、对DIV使用overflow:auto；1111111111222222222225.兼容性特征 在图形桌面浏览器中实现更精确的布局、定位和排版，并允许用户按他们的需求修正个性表现； 可以开发工作在多浏览器和平台上的复杂交互行为； 遵守可用性法律和指导规范，却无须牺牲美观、表现和精确； 以前重新设计网站需要几天或者几星期，现在只需要几小时，从而减少成本和避免工作烦恼； 支持多种浏览器，从而不需要争论和考虑多版本的成本，少得可怜或根本就不需要代码分支； 支持非传统的设备和新设备，从无线设备、可以上网的智能手机到盲人阅读器、屏幕阅读器等残疾人士使用的设备，不需要再争论开发特殊版本的费用； 为任何网页提交适合打印的版本，不需要建立通常的“专门打印页”或者依赖昂贵的专业出版系统来建立类似的版本； 通过把样式从结构、行为中分离，以及严格的文档结构，易于在高级发布流程中重新设计Web文档； 从老的Web语言HTML转换到更强大的以XML为基础的标记语言； 可以在当前符合标准的浏览器和平台上确保正确地工作，也可以在老浏览器中工作； 保证这样设计的站点能继续工作在将来的浏览器和设备上，包括那些还没有发明和仍在想像中的设备，这是向后兼容的许诺；26深入分析对可访问性的错误说法;错误的说法：可访问性迫使你要为网站创建两个版本;错误的说法：纯文档网站能给每个人都提供相等的可访问性;错误的说法：可访问性代价太高;错误的说法：可访问性迫使你创建原始的、低档的设计;错误的说法：根据508条款，网站必须在所有的浏览器和用户代理上看上去都一样;错误的说法：可访问性“只是为残障人士服务的”;错误的说法：Dreamweaver MX/Cynthia Says/Lift/InsertTool Name以及其他一些工具可以解决所有可访问性问题;错误的说法：如果客户提出可以忽略可访问性，设计师就可以不理睬可访问性条款。27使用限定属性的DOM方法，在WEB上仅限下面对象Node TypesAttrCDATASectionCharacterDataCSS2PropertiesCSSRuleCSSStyleRuleCSSStyleSheetCommentDocumentDocumentFragmentDocumentTypeDOMExceptionDOMImplementationDOMParserElementEventHTMLCollectionHTMLDocumentHTMLElementNamedNodeMapNodeNodeListparseErrorProcessingInstructionRangeRangeExceptionTextXMLHttpRequestXMLSerializerXPathExpressionXPathResultXSLTProcessor28在WEB上使用JS脚本进行开发的规则使用Standard ECMA-262开发标准，目前的JS6.0,7.0均有不合标准的地方，能够使用标准中的方法和语法就使用标准语法；开发标准内容较多请见ECMA-262.pdf文档。29.替换 过时的标记假设一个用传统方法制作的网页代码有60KB，那么，替换掉过时的标签，清除其他专有的、表现层的垃圾代码，采用结构化标记和一些CSS规则，同样的页面可以只有30KB.30.firefox不能对innerText支持。firefox支持innerHTML但却不支持innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。31.禁止选取网页内容：在IE中一般用js：obj.onselectstart=function()return false;而firefox用CSS:-moz-user-select:none32.滤镜的支持(例：透明滤镜)：IE:filter：alpha(opacity=10);firefox：-moz-opacity:.10;33.捕获事件：IE：obj.setCapture() 、obj.releaseCapture()Firefox： document.addEventListener(mousemove,mousemovefunction,true);document.removeEventListener(mousemove,mousemovefunction,true);34.获取鼠标位置：IE:event.clientX、event.clientYfirefox：需要事件函数传递事件对象obj.onmousemove=function(ev)X= ev.pageX;Y=ev.pageY;35.DIV等元素的边界问题：比如：设置一个div的CSS:：width:100px;height:100px;border:#000000 1px solid;IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；而firefox：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；所以在做这个兼容IE和firefox的拖动窗口时，在js和css的写法上要动点脑筋，下面是两个小技巧一.判断浏览器类型：var isIE=document.all? true:false;我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false二.在不同浏览器下的CSS处理：一般可以用!important来优先使用css语句（仅firefox支持）比如：border-width:0px!important;border-width:1px;在firefox下这个元素是没有边框的，在IE下边框宽度是1px36.document.formName.item(itemName) 问题问题说明：IE下，可以使用 document.formName.item(itemName) 或 document.formName.elements elementName；Firefox下，只能使用document.formName.elementselementName。解决方法：统一使用document.formName.elementselementName。37.集合类对象问题问题说明：IE下，可以使用 () 或 获取集合类对象；Firefox下，只能使用 获取集合类对象。解决方法：统一使用 获取集合类对象。38.自定义属性问题问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。解决方法：统一通过 getAttribute() 获取自定义属性。39.eval(idName)问题问题说明：IE下，可以使用 eval(idName) 或 getElementById(idName) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(idName) 来取得 id 为 idName 的HTML对象。解决方法：统一用 getElementById(idName) 来取得 id 为 idName 的HTML对象。40.变量名与某HTML对象ID相同的问题问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。解决方法：使用 document.getElementById(idName) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。41.const问题问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。解决方法：统一使用var关键字来定义常量。42.input.type属性问题问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。43.window.event问题问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)示例：function doSomething(evt) var myEvent = evt?evt:(window.event?window.event:null).44.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;如果考虑第43条问题，就改用myEvent代替event即可。45.event.srcElement问题问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。解决方法：使用srcObj = event.srcElement ? event.srcElement : event.target;如果考虑第43条问题，就改用myEvent代替event即可。46.window.location.href问题问题说明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。解决方法：使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。47.模态和非模态窗口问题问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。48.frame和iframe问题以下面的frame为例：(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关键字来访问父窗口。49.body载入问题问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。注 这个问题尚未实际验证，待验证后再来修改。注 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。50. 事件委托方法问题说明：IE下，使用 document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用 document.body.onload = inject();解决方法：统一使用 document.body.onload=new Function(inject(); 或者 document.body.onload = function()/* 这里是代码 */注意 Function和function的区别51.访问的父元素的区别问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。52.cursor:hand VS cursor:pointer问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。解决方法：统一使用pointer。53.innerText的问题.问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。解决方法：在非IE浏览器中使用textContent代替innerText。示例：if(navigator.appName.indexOf(Explorer) -1)document.getElementById(element).innerText = my text; elsedocument.getElementById(element).textContent = my text;注 innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。54. 对象宽高赋值问题问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。解决方法：统一使用 obj.style.height = imgObj.height + px;55. 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。56. 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三项才能达到最终效果。57. CSS透明问题IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。注 最好两个都写，并将opacity属性放在下面。58. 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定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准DHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。BTW，很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。在不同浏览器下的CSS处理：一般可以用!important来优先使用css语句（仅firefox支持）比如：border-width:0px!important;border-width:1px;在firefox下这个元素是没有边框的，在IE下边框宽度是1px几处XHTML与正常状态下的JS、CSS的区别在网页开头加了这个代码就是所谓的XHTML标准了XHTML标准下的几个不同点：59.document.documentElement 与 document.body代码中设置页面的CSS时一定要用：document.documentElement比如：document.documentElement.style.overflow=hidden;overflow-X、overflow-Y 这两个分坐标属性XHTML是不支持的；60.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement即这四个属性（clientWidth、clientHeight、scrollLeft、scrollTop）一定要用document.documentElement但是document.body.appendChild()和document.body.removeChild()却是可以用的，而且用 document.documentElement.appendChild()和 document.documentElement.removeChild()代替却会报错；总结一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement61.加了这个标准以后IE的边框问题也出现了变化，现在和firefox趋于一致了，是不是这个就是XHTML的优点跨浏览器的标准上面提到：设置一个div的CSS:：width:100px;height:100px;border:#000000 1px solid;IE中（正常情况）：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；firefox（正常情况）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；加了XHTML标准后的（IE和firefox打和了，_）：IE中（XHTML）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；firefox（XHTML）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；62.firefox中提交无效* 描述：在项目中，用JS写了个提交（形如an.submit();其中an中表单名），但在firefox中运行时，点按钮却无效* 问题：在firefox中的JS，当form中没有submit按钮时，JS的submit会无效的* 解决：把按钮类型改成submit，若不想显示这个按钮的话，可以用CSS将其隐藏掉：63.firefox中显示模式对话框*描述：想在firefox中显示一个模式对话框*问题：firefox中的JS没有window.showModalDialog这个方法，目前似乎只有Microsoft有！*解决：用如下方法表示：window.open(openwin.html,newWin,modal=yes,width=200,height=200,resizable=no,scrollbars=no);只要在第三个参数中加入modal=yes即可64.firefox中JS对话框的结果传递*描述：有这么一种需求，要求把用户在对话框中操作的结果返回给父窗口，在windows下，可以用window.returnVaule表示*问题：firefox中没有window.returnVaule这个属性*解决：在firefox中获得其父窗口的“引用”，再找到要更新值的组件，设置一下值即可。表示方法如下：假如在父窗口有一个form的标单，标单中有id=page这个text。那么在弹出的窗口中就可以这样对他覆值：parent.opener.document.form.page.value=newvalues;这样就可以完成在弹出窗口对父窗口覆值的需求了。window.eventIE中