浏览器兼容问题

众所周知，浏览器的兼容性问题是开发人员经常会遇到的问题，它是由于不同浏览器的不同对代码的解析不同，而产生的在页面上显示的效果不同。

第一类：

块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）

解决方案：给float标签添加display：inline，将其转换为行内元素

第二类：

表单元素行高不一致

解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）

第三类：

设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度；

***解决方案：***给容器添加overflow：hidden；

第四类：

当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；

解决方案：给img添加border：0；或者是border：none；

第五类：min-height在IE6下不兼容

解决方案 ：

1）min-height：value；

  _height：value；

2）min-height：value；

 height：auto！important；

 height：value；

第六类：图片默认有间隙

解决方案：

1）给img标签添加左浮动float：left；

2）给img标签添加display：block；

第七类：按钮默认大小不一

解决方案：

1）用a标签来模拟按钮，添加样式；

2）如果按钮是一张背景图片，那么直接给按钮添加背景图；

第八类：百分比的bug

***解决方案：***父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%

***解决方案：***给右边浮动的子元素添加clear：right；

第九类：鼠标指针bug

描述 ：cursor：hand；只有ie浏览器识别，其他浏览器不识别

解决方案 ：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；

第十类：透明度属性

解决方案 ：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）

兼容其他浏览器 ：opacity：value；（取值范围0–1）

第十一类：上下margin的重叠问题

描述 ：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；

第十二类：innerText和textContent

描述 ：textContent会在IE浏览器8.0版本中显示不出来

//解决兼容代码
function getChangeText(element,text) {
			//判断类型
            if (typeof element.textContent == "undefined") {
           		 //不支持
                element.innerText = text;
            } else {
                element.textContent = text;
            }
        }

---

原文：https://blog.csdn.net/wangjunren1/article/details/79459547