css兼容性的问题

https://www.douban.com/note/314793848/ 随意的一个博客ie6的兼容

这个博客比较好 http://blog.csdn.net/chuyuqing/article/details/37561313/

这个博客更牛http://www.jb51.net/css/97298.html

ie6 http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html

这个值得一看 http://www.tuicool.com/articles/6bAjim

http://blog.csdn.net/chow__zh/article/details/9132883

=======================================================

比如 两个前后的元素一个左浮动一个右浮动 在ie6就自动换行了，

比如 select在ie6是最顶层的元素，就是z-index永远是最高的，一般ie6下要套个frame

比如..

css兼容大部分上可以用hack方式解决。

js方面就更多了，

比如事件监听，非ie用addEventListener,新一点的ie用attachEvent，旧一点的（ie5)用element[onEvent]..

比如事件这个对象,非ie是用window.event调用,ie要把event作为参数调用进去

比如..

========================================================

========================================================

一些常见的js的兼容性问题

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属性为读写。 
解决方法：可以创建两个输入框，比如平时咱们有密码框，想通过把type为password的值改为text，IE下是不允许的。

8、 window.event问题 
说明：window.event只能在IE下运行，而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。 
解决方法： var e = e || window.event；

9、event.x与event.y问题 
说明：IE下，even对象有x,y属性,但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x,y属性。 
解决方法：使用var x = e.x ? e.x : e.pageX; 来代替IE下的event.x或者Firefox下的e.pageX；

10、event.srcElement问题 
说明： IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。 
解决方法：使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target，请同时注意event的兼容性问题。

11、body问题 
说明：Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在。

12、firefox与IE的父元素(parentElement)的区别 
说明：IE支持parentElement和parentNode获取父节点，而FF只能使用后者。 
解决方法：统一使用parentNode；

13、innerText问题 
说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent。 
解决方法：elem.innerText = elem.textContent = “值”

14、样式单位问题 
说明：FireFox中设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。 
15、样式关键字冲突问题 
说明：CSS属性与JavaScript中的保留关键字命名相同，IE中style+属性，非IE中css+属性。

16、class属性冲突问题 
说明：class属性冲突，class是javascript中的保留关键字。

17、年份获取问题 
说明：使用getFullYear替换getYear。

18、for属性冲突问题 
说明：lable标签的属性for冲突，在IE浏览器中getAttribute(“htmlFor”)，在非IE浏览器中getAttribute(“for”)。 
19、removeChild和removeNode的问题 
说明：appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用，FF支持removeChild。

20、事件监听函数的问题 
说明：标准浏览器的写法addEventListener()和IE的写法attachEvent()。 
解决方法：判断addEventListener是否存在，如果存在则用否则用IE8以下的版本（含IE8）的绑定方法attachEvent，removeEventListener()和detachEvent()也是一样的用法。

21、阻止事件冒泡 
说明： stopPropagation()和cancelBubble，前者是方法，是标准的写法，后者是属性，赋值true表示阻止，是IE的写法。 
解决方法：判断stopPropagation是否存在，如果存在则用标准写法否则则用IE的写法，不可反过来判断。 
22、阻止默认事件 
说明： preventDefault()和returnValue()前者标准写法，后者IE写法。 
解决方法：一般情况建议直接使用return false阻止，但和取消默认事件的含义是不同的。

===============================================================================

===============================================================================

前端常见兼容性问题笔记

 

计算一定要精确

ie6子元素会撑开父级设置好的宽高

会出现兼容性问题 所以要计算好padding值

不要让内容的宽高超出父级设置的宽高

在ie6、7下元素浮动，

如果宽度需要内容撑开，就给里面的块元素都加浮动。

ie67下元素要通过浮动并列在一行就要都给元素加浮动  不然会出现兼容性问题

标签嵌套规范   内联不能嵌套块状

ie6最小高度问题 overflow解决

1px dotted 在ie6下不支持  解决  切背景平铺

margin 传递   浮动或者有宽高 或者

在ie6下解决margin传递要触发haslayout

在ie6下父级有边框的时候子元素margin值消失

解决 触发haslayout 尽量触发

ie6只支持 a标签的四个伪类[伪元素]

inline-block  ie6不支持块标签

浮动:

1.双倍边距bug        块 浮动 横向margin         display：inline

2.li本身没浮动内容浮动 ie6 li 内容浮动            给li加浮动     li加vertical-alian

其实就是浮动块状元素前面不能有内联文本的出现

ie6 下，下margin消失

当一行子元素占有的宽度之和和父级的宽度相差超过3px，或者有不满行状态的时候最有一行的子元素的下margin值就会失效、

ie6下文字溢出bug

原因 1.浮动元素前面有注释 或者内联元素

内联元素越多，溢出越多

子元素的宽度和父级的宽度相差小于3px的时候

解决办法用div包起来 或者把父级元素宽度调大

当浮动元素和绝对定位是并列关系的时候 绝对定位元素  会消失掉

解决办法给绝对定位元素套一层  包一个div 取消并列关系

相对定位:

在ie六下  元素有相对定位的话 父级的overflow 就包不住子级

解决办法 ：给父级也加相对定位

绝对定位

在ie6下定位 元素的父级宽高是奇数的时候元素right 和bottom值会有1px的偏差 没办法解决尽量避免

固定定位 ie6不兼容。

表单元素

ie7 6下输入类型表单控件

上下有1px的间隙问题

解决:给input加浮动

boder:none失效

解决:input重新设置下背景 白色也设置下

输入文字把背景图挤出去

解决:把背景加给父级  清除自身背景 background:none;

-------------------------------------------------------------------

png问题 js文件解决

条件注释语句:

css  hack

important

margin负值  在ie6下超出父级 就被截掉

然后相对定位就可以解决

圣杯  据对定位

、等高布局