浏览器兼容性问题知识整理更新.pptx

 ; ;1、IE中不合理的overflow-x和overflow-y组合;; ; IE中不合理的overflow-x和overflow-y组合 IE中，当overflow-x/overflow-y其中之一被设置成scroll、auto、hidden时，另一个还是visible，不会被设置为auto。 ;如何避免受此问题影响 同时设置overflow-x和overflow-y的值，不要使它出现其中之一为scroll、auto、hidden时，而另一个是visible的情况。;word-wrap在各浏览器中的差异;word-wrap简介 当前行超过指定容器的边界时是否断开转行,该属性取值可以为normal/break-wrap，默认为normal;一些Bug 1，IE6/7 and IE8(Q)中word-wrap:break-word作用于TD时，TD内容是多个Img时，将不换行，撑宽了父容器;2，IE6/7/8/Firefox中word-wrap:break-word作用于option(选项)的父元素/祖先元素上时将不换行隐藏部分显示。;3，BODY元素设置了word-wrap:break-word样式，其中有两个左浮动div元素，第一个div内有一个按钮和若干input [type=hidden]的隐藏域，各input元素之间有空格 。;三、如何避免受此问题影响 合理使用word-wrap属性，对于select元素不使用word-wrap:break-word避免换行样式变形。 ;各浏览器对 text-overflow 特性的支持差异;1、CSS3的text-overflow特性 text-overflow可以作用于块级元素、行内元素和单元格，当其值是ellipsis时是作用是将被剪除的文本用省略号表示。 ;2、各浏览器对text-overflow:ellipsis的支持情况 IE支持的最好，Webkit浏览器只支持不包含块级元素的元素，Firefox旧版彻底不支持;;;如何避免受此问题影响 1. 不要在包含块级元素的元素上使用‘text-overflow:ellipsis’。 2. 当使用:after伪元素时，确保伪元素不是块级元素。 详见/blog/2008/07/firefox-text-overflow-ellipsis/。;Javascript;DOM获取焦点;1、关于focus 网页中进行一系列操作，都需要使某个元素处于“激活”状态，类似于锚点。 通常，表单元素、锚点元素都支持focus。 。; 2、focus与tabIndex（可设置或返回按钮的 tab 键控制次序） 目前，w3c规定，支持tabIndex的有：A, AREA, BUTTON, INPUT,OBJECT, SELECT, and TEXTAREA. 。; 而实际，所有浏览器中，所有元素都支持tabIndex，并且设置过tabIndex的元素都支持focus。因此，我们想让某一元素支持focus，为其设置tabIndex即可。 。;javascript中的setAttribute();定义和用法 setAttribute() 方法创建或改变某个新属性。 elementNode.setAttribute(name,value);1、样式问题;2、setAttribute()的差异;在IE浏览器与其他浏览器的命名区别列表 propFix = { for: htmlFor, class: className, html: innerHTML, readonly: readOnly, maxlength: maxLength, cellspacing: cellSpacing, rowspan: rowSpan, colspan: colSpan, tabindex: tabIndex, usemap: useMap, frameborder: frameBorder };;各浏览器中获取html元素属性的差别;1、设置HTML元素属性的方式 方式1，直接在html代码中设置元素属性，值只能是字符串。 方式2，javascript代码中通过点运算符设置元素属性，值可以是JSON。 方式3，javascript代码中通过setAttribute方法设置元素属性，值可以是JSON。 2、获取HTML元素属性的方式 方式1，javascript代码中通过点运算符获取元素属性。 方式2，javascript代码中通过getAttribute方法获取元素属性 代码测试：getAttribute.html ;3、差别 IE中无论元素自有属性 ，自定义属性都能通