精华内容
下载资源
问答
  • 前端浏览器兼容问题
    千次阅读
    2022-01-12 20:42:04

    前言:

    不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。
    浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎
    所以浏览器兼容性问题一般指:css兼容、js兼容

    常见的浏览器内核:

    常见的浏览器内核可以分四种:Trident、Gecko、Blink、Webkit

    IE浏览器Trident内核,也成为IE内核
    Chrome浏览器Webkit内核,现在是Blink内核
    Firefox浏览器Gecko内核,俗称Firefox内核
    Safari浏览器Webkit内核
    Opera浏览器最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核;
    360浏览器IE+Chrome双内核
    猎豹浏览器IE+Chrome双内核
    百度浏览器IE内核
    QQ浏览器Trident(兼容模式)+Webkit(高速模式)

    常见的兼容性问题:

    1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

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

    2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

    解决方案:设置display:inline;

    3、当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度

    解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

    4、图片默认有间距

    解决方案:使用float 为img 布局

    5、IE9一下浏览器不能使用opacity

    解决方案:

    opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

    6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;

    解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;

    7、cursor:hand 显示手型在safari 上不支持

    解决方案:统一使用 cursor:pointer

    8、两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;

    解决方案:父级元素设置position:relative

    更多相关内容
  • 前端浏览器兼容问题以及解决方法

    千次阅读 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
    IETrident
    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兼容问题

    后续更新!!!
     

    展开全文
  • 所以浏览器兼容问题一般指:css兼容、js兼容 一、样式初始化 由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在开发项目之前都会先进行样式格式化,最常见的分为以下几...

    不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。
    浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎
    所以浏览器兼容性问题一般指:css兼容js兼容

    一、样式初始化

    由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在开发项目之前都会先进行样式格式化,最常见的分为以下几个方面。

    1.pandding 值和 margin 值均设置为 0

    将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。

    2.html 标签

    设置统一的字体,如果使用 rem 单位,则 html 需要设置合适的字号。

    3.a 标签

    设置统一的颜色,将 text-decoration 属性设置为 none。

    4.ol 和 li 标签

    list-style 统一设置为 none。

    5.input、textarea、select、button 等标签初始化

    border 设置为 none;

    根据需要设置颜色和背景色。

    二、使用不同类型的浏览器内核前缀

    • 1.Chrome(谷歌浏览器) 与 Safari(苹果浏览器) 内核:Webkit (中译无) 前缀:-webkit-

    • 2.IE (IE浏览器) 内核:Trident (中译三叉戟) 前缀:-ms-

    • 3.Firefox (火狐浏览器) 内核:Gecko(中译壁虎) 前缀:-moz-

    • 4.Opera (欧朋浏览器) 内核:Presto(中译迅速) 前缀:-o-

    例:

    -webkit-border-radius: 10px; /谷歌浏览器/
    -ms-border-radius: 10px; /IE浏览器/
    -moz-border-radius: 10px; /火狐浏览器/
    -o-border-radius: 10px; /欧朋浏览器/
    border-radius: 10px;
    

    三、针对IE浏览器不同版本的解决方案

    1.对于低版本的 IE 浏览器使用 CSS hack( 即给特点前缀)

    注:以下符号是写在属性名前面。

    兼容 IE6 的 hack 符号:- 或 _

    兼容 IE6 、7 的 hack 符号:` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号

    兼容 IE6、7、8 的 hack 符号:.

    注:以下符号是写在属性值与分号直接,中间不留空格。

    兼容 IE8 的 hack 符号:\0/

    兼容 IE8、9、10 的 hack 符号:\0

    兼容 IE6、7、8、9、10 的 hack 符号:\9

    例:

    /hack符号在前/
    _border-radius: 10px; /IE6/
    +border-radius: 10px; /IE6\7/
    .border-radius: 10px; /IE6\7\8/
    
    /hack符号在后/
    border-radius: 10px\0/; /IE8/
    border-radius: 10px\0; /IE8\9\10/
    border-radius: 10px\9; /IE6\7\8\9\10/
    

    2.为不同的版本编写独立的样式,其他浏览器识别不到。

    例:大于 IE9 的浏览器使用这个单独的 style9.css 样式

    例:只有 IE6 浏览器使用的 style6.css 样式

    四、其他特殊样式

    1.cursor 属性的 hand 值和 pointer 值

    问题:firefox 浏览器不支持 hand 值,但其他浏览器均支持 pointer 值。
    解决: 统一使用 cursor 属性的 pointer 值。

    2.水平居中

    问题:IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。

    解决: 可通过设置父级 text-align:center 实现。

    3.属性值 “inherit”

    问题:IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。

    解决:谨慎使用属性值 “inherit”。

    五、JS兼容性

    1.ES6语法

    问题:IE11 不支持箭头函数、class 语法等(报 SCRIPT1002: 语法错误),不支持 Set 和 Map 数据结构(不报错)及 Promise 对象,支持 let 和 const,IE10 及以下不支持任何 ES6 语法。

    解决:如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。

    2.操作 tr 标签

    问题:IE9 及 IE9 以下版本浏览器,不能操作 tr 标签的 innerHTML 属性。

    解决:可以操作 td 标签的 innerHTML 属性。

    3.Ajax

    问题:IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。

    解决:在使用 Ajax 请求之前设置 jQuery.support.cors=true。

    4.event 对象的 srcElement 属性

    问题:IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性,没有 target 属性。

    解决:obj = event.target?event.target:event.srcElement。

    5.DOM 事件绑定

    问题:IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法,而其他浏览器是 addEventListener() 方法。

    解决:判断 IE 浏览器版本,如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法,注意 attachEvent() 方法的用法,第一个参数为“onclick” 而不是“click”。并且没有第三个参数。

    常见的兼容性问题:

    1、不同浏览器的标签默认的外边距( margin )和内边距(padding)不同

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

    2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现双边距问题

    解决方案:设置display:inline;

    3、当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度

    解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

    4、图片默认有间距

    解决方案:使用float 为img 布局

    5、IE9一下浏览器不能使用opacity

    解决方案:

    opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

    6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;

    解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;

    7、cursor:hand 显示手型在safari 上不支持

    解决方案:统一使用 cursor:pointer

    8、两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;

    解决方案:父级元素设置position:relative

    展开全文
  • 花了近2个月时间挨个整理了网上上百篇的面试题,将一些错误进行了矫正,当然前端的答案并非绝对,各抒己见吧
  • 前端面试——浏览器兼容问题

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

    千次阅读 2020-08-07 17:41:14
    关于前端浏览器兼容问题的总结
  • 1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异。 解决方案:这也是最容易解决的, 在css样式文件中重置margin,padding ...3. min-height问题:由于min-height本身就是一个不...
  • 前端处理浏览器兼容问题
  • 市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。 常见的浏览器内核: 常见的...
  • 所谓的浏览器兼容问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
  • 浏览器 现在各种各样的浏览器很多,但究其根本都是基于以下几种内核的。 IE浏览器:trident内核(据官方消息,今年6月15日就会停止此浏览器的所有服务);...常见的浏览器兼容问题 1-不同浏览器标签默认
  • 前端浏览器兼容问题和解决办法

    万次阅读 多人点赞 2019-06-11 14:18:22
    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面...浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的marg...
  • WEB前端浏览器兼容问题处理

    千次阅读 2018-09-04 11:31:56
    问题一:不同浏览器的标签默认的外补丁和内补丁不同 ... 备注:这个是最常见的也是最易解决的一个浏览器兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。 问题二:块属性标签float...
  • web前端浏览器兼容问题,以及其他新知识点:例如SEO javascript mate等问题
  • 所以浏览器兼容问题一般指:Css兼容和Js兼容 一、Css兼容 1.不同浏览器的标签默认的margin和padding不同 **问题症状:**随便写几个标签,不加样式控制的情况下,各自的margin和padding差异比较大 碰到频率: 100%...
  • 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。 解决方案:CSS里*{margin:0; padding:0;} 备注:这个是最常见的...
  • 前端开发人员守则:如何避免浏览器兼容问题! 2017-01-12 10:52  浏览器兼容问题在前面几期文章中提到过很多次了,它与网站跳出率和用户体验度息息相关。做好浏览器兼容,才能够让网站在不同的浏览器下...
  • 一、基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗口路径 name 为子窗口名字 parameters 为窗口参数(各参数用逗号分隔) 二、示例 代码如下: [removed] window.open(‘page.html’,’new...
  • 前端浏览器兼容问题总结

    千次阅读 2018-10-19 18:54:31
    写小米网页的过程都是使用火狐浏览器调整页面布局,当用360浏览器和本机IE浏览器打开时,布局就错乱了。 问题1:在火狐浏览器上四张图片一排浮动在右侧,IE浏览器打开页面,产品图片一起跑到当前div块下方。...
  • 面试前端,面试官问你怎么解决浏览器兼容问题,你应该怎么回答??
  • ![图片说明](https://img-ask.csdn.net/upload/201604/11/1460342596_183939.png) 为了是网页在各个浏览器中浏览时都可以,写css样式的时候,是不是这一段话全部都要写上

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 102,610
精华内容 41,044
关键字:

前端浏览器兼容问题

友情链接: M函数.rar