浏览器兼容性问题知识整理更新.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/7andIE8(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伪元素时，确保伪元素不是块级元素。

详见http://www.aoao.org.cn/blog/2008/07/firefox-text-overflow-ellipsis/。JavascriptDOM获取焦点1、关于focus

网页中进行一系列操作，都需要使某个元素处于“激活”状态，类似于锚点。
通常，表单元素、锚点元素都支持focus。
。

2、focus与tabIndex（可设置或返回按钮的tab键控制次序）

目前，w3c规定，支持tabIndex的有：A,AREA,BUTTON,INPUT,OBJECT,SELECT,andTEXTAREA.

。

而实际，所有浏览器中，所有元素都支持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、差别