精华内容

下载资源

问答

我要提问

vue中解决浏览器兼容问题的方法 千次阅读
2020-05-15 19:09:19
vue-cli3下解决浏览器兼容性问题：主要是因为IE浏览器不支持ES6 promise的功能
1. 安装babel-polyfill依赖
```
			npm install babel-polyfill --save --dev
```
2.在mian.js中引入import ‘babel-polyfill’
javascript vue.js css3 es6

更多相关内容
Javascript解决常见浏览器兼容问题的12种方法
2020-12-10 07:00:14

如果这些也无效，您可以通过下面列出的12个javascript解决方案修复它，这样您的网页看起来就能跨越所有浏览器了！在本文中，我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。 ...

收起
WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
2021-01-08 09:14:21

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的...

收起
常见浏览器兼容问题
2017-08-08 15:28:15

常见浏览器兼容问题及解决方法。

收起
IE6浏览器兼容问题总结及CSS排版注意地方
2016-05-14 01:02:46

IE6浏览器兼容问题总结及CSS排版注意地方列举IE6中10个不得不注意的问题重构你的代码

收起
浏览器兼容问题.ppt
2021-07-02 13:57:06

浏览器兼容问题.ppt

收起
谈谈JS中常遇到的浏览器兼容问题和解决方法
2020-11-26 15:31:50

今天整理了一下浏览器对JS的兼容问题，希望能给你们带来帮助，我没想到的地方请留言给我，我再加上；常遇到的关于浏览器的宽高问题： //以下均可console.log()实验 var winW=document.body.clientWidth||...

收起
浏览器兼容问题
2017-08-18 14:30:28

针对于web前端浏览器各种兼容性的常见问题的处理方法，有代码贴图讲解

收起
处理HTML5新标签的浏览器兼容版问题
2021-01-19 21:20:11

HTML5规范毕竟是刚刚才定义完成的规范，还有一些浏览器并不能支持其中的新标签和新属性，尤其是IE8及以下版本浏览器。以下介绍一些在页面中使用HTML5新标签的实践方法，目的是让HTML5中的新标签在低级浏览器中也得到...

收起

标签
谈谈JavaScript中浏览器兼容问题的写法小议
2020-11-30 06:04:01

JavaScript中很多坑，其中对浏览器的兼容也是一个问题，本文就简略的归纳了部分针对浏览器兼容问题的写法的例子，旨在便于查找。如果读者有什么好的意见建议，请留言交流，谢谢！ window窗口大小 1.在IE9+、Chrome...

收起
Javascript字符串浏览器兼容问题分析
2021-01-21 13:40:46

本文实例分析了Javascript字符串浏览器兼容问题。分享给大家供大家参考。具体分析如下：先看下不兼容的写法，若我想获取某个字符串的第几位代码如下:var str=’aavvvcc’; console.info(str[0]); 这种写法在IE 7...

收起
都是IE惹的祸多浏览器兼容问题
2020-10-30 22:27:56

都是IE惹的祸多浏览器兼容问题

收起
css 解决浏览器兼容问题
2020-09-25 11:29:27

使用div+css建站的朋友一定都知道CSS兼容的问题。今天教大家五招方法完全可以解决浏览器兼容问题。

收起
ajax文件上传成功解决浏览器兼容问题
2020-10-22 08:31:04

主要为大家详细介绍了ajax文件上传的相关资料，成功解决了浏览器兼容问题，感兴趣的小伙伴们可以参考一下

收起
前端浏览器兼容问题以及解决方法
千次阅读 2021-09-14 10:58:55
所以浏览器的兼容问题 一般是 css兼容问题，js兼容问题。二、浏览器的渲染内核 浏览器 内核（渲染引擎） Chrome谷歌之前Webkit，已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE ...
首先：

不同浏览器的内核不尽相同，所以浏览器对网页的解析也有所差异。

浏览器的内核主要分为两种：一、渲染引擎二、JS引擎。

所以浏览器的兼容问题一般是 css兼容问题，js兼容问题。

二、浏览器的渲染内核

浏览器内核（渲染引擎）
Chrome谷歌之前Webkit，已改Blink内核
FireFox火狐 Gecko
Safari苹果 Webkit
IE Trident
Opera欧朋现已改用Google Chrome的Blink内核

三、css兼容问题

1.不同浏览器的标签默认的（margin和 padding不同）

问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决办法：第一种：我们一般使用通配符（*）设置margin：0；padding：0；性能不好！

第二种：一般我们会引入reset.css样式重置 (推荐)

2.css3新属性，加浏览器前缀兼容早期浏览器
```
-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */
```
哪些css3属性需要加：
```
定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow  盒子阴影
flex  弹性布局
....
```
3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

常见症状：IE6中后面的一块被顶到下一行

解决办法：这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline

4.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

常见症状：设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.

解决办法：
1. 给超出高度的标签设置overflow:hidden;
2. 或者设置行高line-height 小于你设置的高度。
5. 超链接访问过后hover样式就不出现的问题

常见症状：被点击访问过的超链接样式不在具有hover和active了

解决办法：是改变CSS属性的排列顺序: L-V-H-A
```
<style type="text/css">

a:link {}
a:visited {}
a:hover {}
a:active {}

</style>
```
6.图片有默认间距

常见症状： 几个img标签放在一起的时候有些浏览器会有默认的间距通配符清除间距也不起作用。

解决办法：（font-size：0） 使用float属性为img布局(所有图片左浮)

7.css hack解决浏览器兼容性

不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。
下面是css hack写法：
```
background-color:yellow0; 0 是留给ie8的
+background-color:pink;   + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
```
四、js兼容问题

后续更新！！！
收起
展开全文
JS 实现 ajax 异步浏览器兼容问题
2020-10-20 14:17:58

本文通过实例代码给大家讲解了js实现ajax异步浏览器兼容问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧

收起
.net和 vb WebBrowser 浏览器兼容问题
2018-04-25 10:08:44

.net和 vb WebBrowser 浏览器兼容问题自己封装的开发中遇到的第一次加载注册表可能未注册 F5一下就会成功

收起
前端面试——浏览器兼容问题
万次阅读 2019-03-26 23:23:28
前端面试——浏览器兼容问题一、css样式兼容性问题一、css样式兼容性问题 ie8浏览器不支持css3，像： ie8对选择器支持情况 ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:...
前端面试——浏览器兼容问题

一、css样式兼容性问题
二、js语法
三、dom标签表现形式
四、其他
一、css样式兼容性问题
1. ie8浏览器不支持css3，像：
2. ie8对选择器支持情况
  ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:enable、:disable 、:checked
  ie8对before伪类不支持，引入兼容库js后，定位仍会出现问题，须修改边距值
3. css hack
  “-″减号是IE6专有的hack
  “\9″ IE6/IE7/IE8/IE9/IE10都生效
  “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
  “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
  ie8也不支持flex布局，须改成其它布局；
二、js语法
1. 添加dom监听事件
  .addEventListener = function (type,listener,useCapture ) { };
  //第一个参数事件名称
  //第二个参数事件处理函数（监听者）
  //第三个参数 true捕获 false冒泡
  //IE9以后才支持
  // 兼容旧环境
2. IE8的数组对象没有forEach方法，晕。所以自行声明即可。
3. . 数组的indexOf()方法在IE8中的兼容性问题
4. ie8浏览器不支持endsWith，trim()，startsWith等方法，在使用中就会遇见兼容性问题
5. array.filter(); 参考文件
6. ie8 的数组没有map方法
三、dom标签表现形式
1. dom默认自定义样式
2. dom定义样式
3. video标签兼容
  解决方法:在ie八浏览器下引入html5media.min.js 需要注意的是把三个文件放在同一文件夹下面. video 的width和height不要用百分比尽量用具体的像素（本人在ie8下面宽度用100%，html5media.min.js要报错）。
  input标签：
四、其他
1. DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档"
  具体会影响：
  对标记、attributes 、properties的约束规则
  对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于CSS 代码甚至 JavaScript 脚本的解析
2. 设置浏览器渲染内核
  IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame，那么就用Chrome内核来渲染。
3. HTML5的新标签（nav/footer等）IE中这些标签可能无法正常显示
  参考文章
4. ie8不兼容SVG图形、Canvas，兼容方案：优雅降级。
5. CSS3字体单位“rem”兼容方案：rem.js
  CSS3引入了新的字体大小单位rem，与em的“相对于其父元素来设置字体大小”的功能不同，rem是相对于根元素的字体大小比率单位，成了目前主流的单位之一。IE9+开始支持，IE8就只能通过引入js库来支持了。
  使用方法：在页面中引用rem.js文件。需要引用在页脚，也就是末尾，在所有css文件引用和DOM元素之后。
  参考文章
6. 使用jQuery2.0以下的版本推荐使用1.8.3
7. js书写时注意分号的书写，chrome,firefox等高级浏览器会自动识别分号，ie在低版本情况下只会报错，如果没注意1,使用了jQuery2.x以上的版本，jQuery内部也会报分号而引起的错误
8. ie注释
```

```
。。。后续持续更新
收起
展开全文
前端面试题
浏览器兼容问题及解决方法
千次阅读 2019-08-21 14:44:43
出现浏览器兼容问题，主要是由于浏览器内核不相同。对于浏览器兼容问题，总结为HTML、JavaScript兼容，CSS兼容。 HTML相关问题易处理，无非高版本浏览器用了低版本浏览器无法识别元素，导致无法解析。特别是html5...
出现浏览器兼容问题，主要是由于浏览器内核不相同。

对于浏览器兼容问题，总结为HTML、JavaScript兼容，CSS兼容。

HTML相关问题易处理，无非高版本浏览器用了低版本浏览器无法识别元素，导致无法解析。

特别是html5增加了许多标签。

HTML兼容问题解决方法：

html的hack（条件注释法）：
```




  

  
  
    

    

缺点是在IE 浏览器下可能会增加额外的HTTP请求数。 
```
CSS兼容问题解决方法：

css的hack：
```
background:red;		//高级浏览器识别
_background:red;	//仅IE6识别
!background:red;	//仅IE6/7识别
background:red\0/;	//仅IE8识别
background:red\0;	//IE8/9/10识别
background:red\9;	//IE6/7/8/9/10识别
```
常见的兼容性问题bug：

1、IE6 怪异解析之padding与 border算入宽高
原因：未加文档声明造成非盒模型解析
解决方法：加入文档声明<!doctype html>

2、IE6 在块元素、左右浮动、设定margin时造成margin双倍（双边距）
解决方法：display:inline

3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签 11，垂直居中，20-11=9，9 要分给文字的上面与下面，怎么分？IE6 就会与其它的不同，所以，尽量避免。
1）字体大小为奇数之边框高度少1px
解决方法：字体大小设置为偶数或line-height为偶数
2）line-height，文本垂直居中差1px
解决方法：padding-top 代替line-height居中，或line-height加 1 或减1
3）与父标签的宽度的奇偶不同的居中造成1px的偏离
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度

4、内部盒模型超出父级时，父级被撑大
解决方法：父标签使用overflow:hidden

5、line-height默认行高bug
解决方法：line-height设值

6、行标签之间会有一小段空白
解决方法：float或结构并排(可读性差，不建议)

7、标签高度无法小于19px
解决方法：overflow: hidden;

8、左浮元素margin-bottom 失效
解决方法：显示设置高度 or 父标签设置_padding-bottom 代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签 margin- bottom，即(margin-bottom 与 float不同时作用于一个标签)

9、img 于块元素中，底边多出空白
解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

10、li之间会有间距
解决方法：float: left;

11、块元素中有文字及右浮动的行元素，行元素换行
解决方法：将行元素置于块元素内的文字前

12、position下的left，bottom 错位
解决方法：为父级(relative 层)设置宽高或添加*zoom:1

13、子级中有设置position，则父级overflow失效
解决方法：为父级设置position:relative

14、 IE6 下图片下方有空隙产生；
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为 display:block，或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom 都可以解决. （但是近我发现这个问题在其它浏览器中也有所体现）

15、IE6 3px bug 两个浮动层中间有间隙，这个IE 的 3PX BUG也是经常出现的,
解决的办法是给右边元素也同样浮动 float:left 或者相对IE6 定义.left margin-right:-3px; 经典两列布局，float: left;width:200px; 第二个，margin-left,200px; 他们之间会产生3px 的间距。

16、在 IE6 中没有min-width的概念，其默认width就是min-width，所以有时字体过多它会选择撑开容器。

17、 IE6 无法定义1px左右高度的容器，是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px ⑦ 使用margin ： 0 auto；方法使容器居中依然在IE6 中行不通，我们要对其父容器使用

18、被点击访问过的超链接样式不在具有hover和 active了,很多人应该都遇到过这个问题, 解决方法是改变CSS属性的排列顺序: L-V-H-A

19、在使用绝对定位/相对定位时，设置z-index 在 ie 中可能会失效，是因为其元素依赖于其父元素的z-index，而父元素默认为0 ？所以子元素z-index 高，而父元素底，依然不会改变其显示顺序；

JS兼容性问题

1、关于获取行外样式currentStyle和getComputedStyle出现的兼容性问题：
js通过style不可获取行外样,式，当需要获取行外样式时，通过以下两个方法获取行外样式：
```
IE下：currentStyle
Chrome，FF下：getComputedStyle(oDiv,false)
兼容两个浏览器的写法：
if(oDiv.currentStyle){
	alert(oDiv.currentStyle.width);
}else{
	alert(getComputedStyle(oDiv,false).width);
}
*注：在解决很多兼容性写法时，都是用if...else...

封装一个获取行外样式的函数：(兼容所有浏览器，包括低版本IE6,7)
function getStyle(obj,name){
	if(obj.currentStyle){
		//IE
		return obj.currentStyle[name];
	}else{
		//Chrom,FF
		return getComputedStyle(obj,false)[name];
	}
}
调用：getStyle（oDiv,'width'）;
```
2、用“索引”获取字符串每一项出现的兼容性问题：
```
对于字符串也有类似于数组这样的通过下标索引获取每一项的值，
var str=“abcde”;
alert（str[1]）;
但是低版本的浏览器IE6,7不兼容
兼容方法：str.charAt(i)	//全部浏览器都兼容
var str="abcde";
for(var i=0;i<str.length;i++){
	alert(str.charAt(i)};	//放回字符串中的每一项
}
```
3、关于DOM中childNodes获取子节点出现的兼容性问题
childNodes：获取子节点，
——IE6-8：获取的是元素节点，正常
——高版本浏览器：但是会包含文本节点和元素节点（不正常）
解决方法：使用nodeType:节点的类型，并作出判断。
——nodeType=3 文本节点
——nodeType=1 元素节点
```
 例: 获取ul里所有的子节点，让所有的子节点背景色变成红色   获取元素子节点兼容的方法:  
 var oUl=document.getElementById('ul');   
 for(var i=0;i<oUl.childNodes.length;i++){
 	if(oUl.childNodes[i].nodeType==1){
 		oUl.childNodes[i].style.background='red';     
 	}   
 }
 *注：上面的childNodes为我们带来的坤然完全可以有children属性来代替。
 children属性：只获取元素节点，不获取文本节点，兼容所有的浏览器，所以一般获取子节点时，最好用children属性。
var oUl=document.getElementById('ul');       oUl.children.style.background="red";
```
4、使用firstChild，lastChild等，获取第一个/最后一个元素节点时产生的问题
——IE6-8下，firstChild，lastChild，nextSibling，previousSiling，获取第一个元素节点
(高版本浏览器IE9+,FF,Chrome 不兼容,其获取的空白文本节点)
——高版本浏览器下：firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本浏览器IE6-8 不兼容)
——兼容写法：找到ul的第一个元素节点，并将背景色变成红色
```
var oUl=document.getElementById('ul');     
if(oUl.firstElementChild){       
	//高版本浏览器
	oUl.firstElementChild.style.background='red';     }else{       
	//IE6-8
	oUl.firstChild.style.background='red';    
 } 
```
5、使用event对象，出现的兼容性问题
如：获取鼠标位置
IE/Chrom：event.clientX;event.clientY
FF/IE9以上/Chrom:传参ev–>ev.clientX;ev.clientY
获取event对象兼容性写法：var oEvent==ev||event；
```
document.oncilck=function(ev){
	var oEvent==ev||event;
	if(oEvent){
		alert(oEvent.clientX);
	}
} 
```
6、为一个元素绑定两个相同事件：attachEvent/attachEventLister出现的兼容问题
事件绑定：（不兼容需要两个结合做兼容if…else…）
IE8以下用：attachEvent(‘事件名’，fn)；
FF，Chrome，IE9-10用：attachEventLister（‘事件名’，fn，false）；
多事件绑定封装成一个兼容函数：
```
function myAddEvent(obj,ev,fn){
	if(obj.attachEvent){
		//IE8 以下         
		obj.attachEvent('on'+ev,fn);       
	}else{
		//FF,Chrome,IE9-10
		obj.attachEventLister(ev,fn,false); 
	}     
}     
myAddEvent(oBtn,'click',function(){ alert(a); });     myAddEvent(oBtn,'click',function(){ alert(b); }); 
```
7、于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时：
IE，Chrome：document.body.scrollTop
FF:document.documentElement.scrollTop
兼容处理：var
```
scrollTop=document.documentElement.scrollTop||document.body.scrollTop 
```
收起
展开全文
js Date()日期函数浏览器兼容问题解决方法
2020-10-19 05:54:49

主要介绍了js Date()日期函数浏览器兼容问题解决方法,需要的朋友可以参考下

收起
javascript解决innerText浏览器兼容问题思路代码
2020-10-27 09:41:45

innerText浏览器兼容这块始终都是一个问题，下面与大家分享下使用javascript解决，感兴趣的朋友可以参考下哈，希望对你有所帮助

收起
javascript解决innerText浏览器兼容问题思路代码.docx
2022-01-18 22:15:36

javascript解决innerText浏览器兼容问题思路代码.docx

收起

开发
常见浏览器兼容问题[文].pdf
2021-10-12 04:01:19

常见浏览器兼容问题[文].pdf

收起

1 2 3 4 5 ... 20

收藏数 333,586

精华内容 133,434

热门标签

关键字：

浏览器兼容问题