前端浏览器兼容性问题和解决办法

最新推荐文章于 2024-03-03 16:30:00 发布

UzumakiHan

最新推荐文章于 2024-03-03 16:30:00 发布

阅读量318

点赞数 1

分类专栏： html JavaScript 文章标签： html

本文链接：https://blog.csdn.net/Hhjian524/article/details/106378119

版权

JavaScript 同时被 2 个专栏收录

93 篇文章 1 订阅

订阅专栏

html

45 篇文章 1 订阅

订阅专栏

各标签margin padding的问题（不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同）

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

表单元素行高不一致

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

第九类：鼠标指针bug

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

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

上下margin的重叠问题

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

解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

透明度属性

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

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

const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量. 
解决方法：统一使用var关键字来定义常量.

event.srcElement问题

问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj =event.srcElement ?event.srcElement : event.target;

事件绑定

IE：dom.attachEvent();

其他浏览器：dom.addEventListener();

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。
封装兼容性的 addEvent(elem, type, handle);方法
function addEvent(elem,type,handle){
  	if(elem.addEventListener){
       elem.addEventListener(type,handle,false);
  	}else if(elem.attachEvent){
       elem.attachEvent('on' + type, function(){
       	handle.call(elem);
       })  
  	}else{
  		elem['on' + type] = handle;
  	}
  }

操作tr的html

在ie9以下，不能操作tr的innerHTML

ajax略有不同

if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }

innerText在IE中能正常工作，但在FireFox中却不行.

需用textContent。
解决方法:
if(navigator.appName.indexOf("Explorer")  >   -1){
       document.getElementById('element').innerText   =  "my   text";
}   else{
        document.getElementById('element').textContent  =   "my   text";
}

css中的width和padding

在IE7和FireFox中width宽度不包括padding，在Ie6中包括padding.

FireFox和IE BOX模型解释不一致导致相差2px

box.style{width:100;border1px;} 
ie理解为box.width =100 
ff理解为box.width =100 + 1*2 = 102  //加上边框2px

元素水平居中问题

FireFox: margin:0auto;

IE: 父级{ text-align:center; }

对齐文本与文本输入框

加上vertical-align:middle;

<style type="text/css">
<!--
input { 
width:200px; 
height:30px; 
border:1px solid red; 
vertical-align:middle; 
} 
-->
</style>
经验证，在IE下任一版本都不适用，而ff、opera、safari、chrome均OK！

LI中内容超过长度后以省略号显示

此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

<style type="text/css">
<!--
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
}

-->
</style>

为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
<!-- 
html { 
scrollbar-face-color:#f6f6f6; 
scrollbar-highlight-color:#fff; 
scrollbar-shadow-color:#eeeeee; 
scrollbar-3dlight-color:#eeeeee; 
scrollbar-arrow-color:#000; 
scrollbar-track-color:#fff; 
scrollbar-darkshadow-color:#fff; 
} 
-->
＜/style>

行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

在display:block;后面加入display:inline;display:table;

图片默认有间距(几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。)

使用float属性为img布局

被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样式，
 ":link": a标签还未被访问的状态；
 ":visited": a标签已被访问过的状态；
 ":hover": 鼠标悬停在a标签上的状态；
 ":active": a标签被鼠标按着时的状态；

IE6下无法设置1px的行高，原因是由其默认行高引起的

解决办法：为期设置overflow:hidden;或者line-height:1px;

在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0，子高父低，所以不会改变显示的顺序

event.x与event.y问题

说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 
解决方法： var x = event.x ? event.x : e.pageX
var y = event.y ? event.y: e.pageY

自定义属性问题(IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；Firefox下，只能使用getAttribute() 获取自定义属性。)

解决方法：统一通过getAttribute() 获取自定义属性。

input边框问题

解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。

按钮默认大小不一

解决方案：

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

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

百分比的bug

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

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

css3 box-shadow 对于不同的浏览器，兼容问题的解决办法:

.box_shadow{ 
background-color: #eee; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/ 
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 
box-shadow:2px 2px 5px #969696;/*opera或ie9*/ 
}

各个浏览器之间显示字体不一致的解决办法

统一设置全局字体：
body{font-family: '微软雅黑';}

去掉IE浏览器中输入框右边的小图标（叉号和眼睛）

::-ms-clear, ::-ms-reveal{display: none;}

去掉谷歌浏览器下输入框自带边框

.class{outline:none}

禁止表单的自动填充功能

autocomplete='off'

取消chrome下textarea可拖动放大

textarea{resize:none}

IE6-7 line-height 失效的问题

问题：在ie 中 img 与文字放一起时，line-height 不起作用
解决：都设置成 float

td 自动换行的问题

问题：table 宽度固定，td 自动换行

解决：设置 Table 为 table-layout: fixed，td 为 word-wrap: break-word

键盘事件 keyCode 兼容性写法

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}

使用IE专用的条件注释

<!--其他浏览器 --> 
<link rel="stylesheet" type="text/css" href="css.css" /> 
 <!--[if IE 7]> 
 <!-- 适合于IE7 --> 
 <link rel="stylesheet" type="text/css" href="ie7.css" /> 
 <![endif]--> 
 <!--[if lte IE 6]> 
 <!-- 适合于IE6及以下 --> 
 <link rel="stylesheet" type="text/css" href="ie.css" /> 
 <![endif]-->

以下两种方法几乎能解决现今所有兼容.

1, !important (不是很推荐，用下面的一种感觉最安全) 

随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

代码: 
<style> 
#wrapper { 
width: 100px!important; /* IE7+FF */ 
width: 80px; /* IE6 */ 
} 
</style>

图片3px空白

问题描述：靠近浮动元素的元素要么有3px的间距，要么位置偏下

解决方案：给img标签添加vertical-align等相关属性或display: block

用a标签插入的图片在IE浏览器中会出现边框

解决方式：border：none;

IE6中会把低于16px的字体默认为16px：

解决方式：font-size：0;overflow：hidden;

获取浏览器可视窗口的宽度与高度：

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

获取事件源元素：

// 备注：event是事件函数的参数。
const event = event || window.event;
const target = event.srcElement || event.target;

// 请注意：下方的处理都默认event已经按照上面的写法兼容过衍生的
// 阻止事件冒泡和浏览器默认行为
event.preventDefault 
	? event.preventDefault()
	: event.returnValue = false; 
// 只阻止事件冒泡
event.stopPropagation 
	? event.stopPropagation(); 
	: event.cancelBubble = true;