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

    2017-08-08 15:28:15
    常见浏览器兼容问题及解决方法。
  • IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
  • 浏览器兼容问题

    2017-08-18 14:30:28
    针对于web前端浏览器各种兼容性的常见问题的处理方法,有代码贴图讲解
  • 所谓的浏览器兼容问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
  • 浏览器兼容问题.ppt

    2021-07-02 13:57:06
    浏览器兼容问题.ppt
  • 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。...

    为什么会有兼容问题?

    由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。

    使用Trident内核的浏览器:IE、Maxthon、TT; 使用Gecko内核的浏览器:Netcape6及以上版本、FireFox; 使用Presto内核的浏览器:Opera7及以上版本; 使用Webkit内核的浏览器:Safari、Chrome。

    而我现在所说的兼容性问题,主要是说IE与几个主流浏览器如firefox,google等。而对IE浏览器来说,IE7又是个跨度,因为之前的版本更新甚慢,bug甚多。从IE8开始,IE浏览器渐渐遵循标准,到IE9后由于大家都一致认为标准很重要,可以说在兼容性上比较好了,但是在中国来说,由于xp的占有率问题,使用IE7以下的用户仍然很多,所以我们不得不考虑低版本浏览器的兼容。

    对浏览器兼容问题,一般分,HTM兼容L,Javascript兼容,CSS兼容。 其中html相关问题比较容易处理,无非是高版本浏览器用了低版本浏览器无法识别的元素,导致其不能解析,所以平时注意一点就是。特别是HTML5增加了许多新标签,低版本浏览器有点影响时代进步啊。

    问题一:不同浏览器的标签默认的外补丁和内补丁不同

    • 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
    • 碰到频率:100%
    • 解决方案:css里 *{margin:0;padding:0;}
    • 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

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

    • 问题症状:常见症状是ie6中后面的一块被顶到下一行
    • 碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
    • 解决方案:在float的标签样式控制中加入 display:inline,将其转化为行内属性
    • 备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    问题三:设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度

    • 问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
    • 碰到频率:60%
    • 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    • 备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种)

    • 问题症状:ie6里的间距比超过设置的间距
    • 碰到几率:20%
    • 解决方案:在display:block;后面加入display:inline; display:table;
    • 备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,它就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:table

    问题五:图片默认有间距

    • 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。
    • 碰到几率:20%
    • 解决方案:使用float属性来为img标签布局
    • 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

    问题六:标签最低高度设置min-height不兼容

    • 问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容
    • 碰到几率:5%
    • 解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:
    {min-height:200px; 
    height:auto !important; 
    height:200px; 
    overflow:visible;}
    • 备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

    问题七:透明度的兼容css设置

    IE6 不支持 PNG 透明背景,
    解决办法: IE6 下使用 gif 图

    对于兼容性问题
    方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

    兼容性问题技巧

    技巧一:css hack

    使用hacker 我们可以把浏览器分为3类:ie6 ,ie7和遨游;其他(ie8 chrome safari opera firefox等)

    ie6认识的hacker 是下划线_ 和星号 *
    ie7 ,遨游认识的hacker是星号 * (包括上面问题6中的 !important也算是hack的一种。不过实用性较小。)

    比如这样一个css设置 height:300px;*height:200px;_height:100px;
    ie6浏览器在读到 height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,ie6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

    ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px;
    剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。

    因为优先级相同且相冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

    /* CSS属性级Hack */ 
    color:red; /* 所有浏览器可识别*/
    
    _color:red; /* 仅IE6 识别 */
    
    *color:red; /* IE6、IE7 识别 */
    
    +color:red; /* IE6、IE7 识别 */
    
    *+color:red; /* IE6、IE7 识别 */
    
    [color:red; /* IE6、IE7 识别 */ 
    
    color:red\9; /* IE6、IE7、IE8、IE9 识别 */
    
    color:red\0; /* IE8、IE9 识别*/
    
    color:red\9\0; /* 仅IE9识别 */
    
    color:red \0; /* 仅IE9识别 */
    
    color:red!important; /* IE6 不识别!important 有危险*/
    
    /* CSS选择符级Hack */ 
    *html #demo { color:red;} /* 仅IE6 识别 */
    
    *+html #demo { color:red;} /* 仅IE7 识别 */
    
    body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 
    */ 
    head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
    
    :root #demo { color:red\9; } : /* 仅IE9识别 */

    越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。这不多说,归结为到一定水平了,浮动会用的较少。另外,您也会避免使用浮动+margin的用法。所以,越后来越不易遇到这种bug。

    技巧二:padding,marign,height,width

    注意是技巧,不是方法: 写好标准头 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> http://www.w3.org/1999/xhtml”> 尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding

    技巧三:显示类(display:block,inline)

    display:block,inline两个元素
    
    display:block; //可以为内嵌元素模拟为块元素
    
    display:inline; //实现同一行排列的的效果
    
    display:table; //for FF,模拟table的效果

    display:block块元素,元素的特点是: 总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度

    display:inline就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。span,a,label,input,img,strong和em是 inline 元素的例子

    技巧四:怎样使一个div层居中于浏览器中?
    (1)

    <style type="text/css">
    
    <!-- div {
    
    position:absolute;
    
    top:50%;
    
    left:50%;
    
    margin:-100px 0 0 -100px;
    
    width:200px;
    
    height:200px;
    
    border:1px solid red; } -->
    
    </style>

    2)div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;

    技巧五:float的div闭合;清除浮动;自适应高度
    ① 例如:<div id=”floatA”><div id=”floatB”><div id=”NOTfloatC”>

    这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

    这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在<divclass=”floatB”><div class=”NOTfloatC”>之间加上<div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:

    .clear{clear:both;}

    ②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
    例如某一个wrapper如下定义:

    .colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

    ③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

    <div id=”page”>
    
    <div id=”left”></div>
    <div id=”center”></div>
    <div id=”right”></div>
    
    </div>

    比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决:

    <div id=”page”>
    
    <div id=”bg” style=”float:left;width:100%”>
    
    <div id=”left”></div>
    <div id=”center”></div>
    <div id=”right”></div>
    
    </div>
    
    </div>

    再嵌入一个float left而宽度是100%的DIV解决之。

    ④万能float 闭合(非常重要!)

    关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽。

    /* Clear Fix */ 
    .clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } 
    .clearfix { display:inline-block; } 
    /* Hide from IE Mac */ 
    .clearfix {display:block;} 
    /* End hide from IE Mac */ 
    /* end of clearfix */

    或者这样设置:.hackbox{display:table; //将对象作为块元素级的表格显示}

    技巧六:div嵌套时 y轴上 padding和 marign的问题

    • FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
    • IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
    • FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的距离为0,子marign 作用到 父div 外面

    注:本文转自:https://blog.csdn.net/xustart7720/article/details/73604651/

    展开全文
  • 前端面试——浏览器兼容问题

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

    一、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注释

    <!--[if IE 8]>
    <script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"></script>
    <![endif]-->
    

    。。。后续持续更新

    展开全文
  • NULL 博文链接:https://1960370817.iteye.com/blog/2398884
  • JavaScript中很多坑,其中对浏览器的兼容也是一个问题,本文就简略的归纳了部分针对浏览器兼容问题的写法的例子,旨在便于查找。如果读者有什么好的意见建议,请留言交流,谢谢! window窗口大小 1.在IE9+、Chrome...
  • 本文通过实例代码给大家讲解了js实现ajax异步浏览器兼容问题,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 本文实例分析了Javascript字符串浏览器兼容问题。分享给大家供大家参考。具体分析如下: 先看下不兼容的写法,若我想获取某个字符串的第几位 代码如下:var str=’aavvvcc’; console.info(str[0]); 这种写法 在IE 7...
  • vue项目中浏览器兼容问题

    千次阅读 2019-09-29 18:20:05
    vue项目中浏览器兼容问题 1.安装 npm install --save babel-polyfill 2.在main.js中引入(最好放在最前面) import 'babel-polyfill' 3.在webpack.base.conf.js中配置 module.exports = { ...... entry: { app: ...

    vue项目中浏览器兼容问题

    1.安装

    npm install --save babel-polyfill 
    npm install es6-promise --save
    

    2.在main.js中引入(最好放在最前面)

    import 'babel-polyfill'
    import promise from 'es6-promise'
    promise.polyfill()
    

    3.在webpack.base.conf.js中配置

    module.exports = {
      ......
      entry: {
        app: ["babel-polyfill", "./src/main.js"],
      },
      ......
      }
    

    4.在index.html中强制浏览器默认渲染最高版本内核

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    
    展开全文
  • 使用div+css建站的朋友一定都知道CSS兼容的问题。今天教大家五招方法完全可以解决浏览器兼容问题
  • 浏览器兼容问题一直是一个难缠的问题,从你开始想成为一名程序员,到深入学习,从最开始什么都会懂,到开始写代码.从你研究页面到最后的面试. 你经常能听到这个2个问题? 1.你是如何处理浏览器兼容问题的. 2.什么是响应...

    浏览器兼容问题一直是一个难缠的问题,从你开始想成为一名程序员,到深入学习,从最开始什么都会懂,到开始写代码.从你研究页面到最后的面试.

    你经常能听到这个2个问题? 1.你是如何处理浏览器兼容问题的. 2.什么是响应式布局.

    这2个问题是提及最高,已经被问到最多的问题,是的,前端程序员这个是避免不了的.所以我才决定,放下学习其他js的时间,来写一个博客,让我们共同克服的这个问题

    这个博客,先说浏览器兼容问题?

     

    第一步?到底什么是浏览器兼容问题?

    (以下来自百度百科):浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。

    第二步?浏览器兼容问题说的是啥? 

    1.其实说白了,就是我们的css和html在发展,推出了很多新的东西,比如css3和html5,而我们进步缓慢的IE浏览器是跟不上这个节奏的,所以就会出现不识别的东西,很多东西,在新的浏览器会识别,旧的就不会被识别(这里特别提醒一下,注意 window和mac,哪怕同样的版本的浏览器,也会不一样哦)

    2.再就是虽然识别了.但定义的范围或者一些默认的参数会不同,因为浏览器内核差异,最值得吐槽的是IE浏览器和别的很多浏览器都不一样,这样也不会兼容.

    其实就是基于以上2个原因,才会导致无论怎么找工作,都会问到,会用原生的js写东西吗?,毕竟很多新的js框架里封装的东西,老的浏览器就是因为上面的原因而不识别

     

    附赠一个连接http://developer.51cto.com/art/201004/192415.htm 这里介绍了各大浏览器对html5和css3的支持,方便你查看,你要的浏览器到底是否支持这些东西不?

    好了,上面说了一堆理论.希望在面试的时候能帮到你,让你不至于不知道如何和面试官聊天(当然上面的也不是很全),下面开始说代码吧,

    (以下内容,来自于各个网站+自己见解+资料整理)

     

    NO1.我们所熟悉的hack

    为了能让网站设计正常的运行于各种浏览器平台,网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。

    CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程,主要用来解决目前各类浏览器无法标准解析CSS样式,导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。  

    代码: 使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

     

    IE6认识的hacker 是下划线_ 和星号 *

    ◆IE7 遨游认识的hacker是星号 *

    比如这样一个CSS设置:

    height:300px;*height:200px;_height:100px; 

    IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

    IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

    如果你从上面的例子理解后,请看下面的一段话:(重在理解)

        1、针对I E 系列浏览器的网站设计代码 
    针对 IE 6的专属CSS Hack网站设计代码#id{display:block;}也就是在网站设计CSS属性前加一个小划线就好。
    针对 IE 7的专属CSS Hack网站设计代码#id{*display:block;}即在网站设计CSS属性前加上一个星号即可        针对 IE 8的专属CSS Hack网站设计代码#id{margin-top:10px 9;/*IE8*/}
    如上所示,解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。
      2、针对火狐的CSS Hack 网站设计代码        
    火狐可谓是最标准的浏览器之一了,网站设计技术只要稍稍不到位就能体现得淋漓尽致,所以不少网站设计师也很头痛,其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到 
    @-moz-document url-prefix()的{ } 里面就行了        
    例如:@-moz-document url-prefix(){#id{ display: block; }}。
      3、针对Safari的CSS Hack网站设计代码
    Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器,用来取代之前的Internet Explorer for Mac,使用了KDE的KHTML作为浏览器的运算核心。
    @media screen and (-webkit-min-device-pixel-ratio:0){#id { display: block; }}兼容性做法和火狐相近。
      4、针对 Opera 的CSS Hack 网站设计代码
    Opera即Opera Software ASA,是台式机、各种设备和移动网络浏览器市场的商业领袖,因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认,并在网上受到很多人的推崇。
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){head~body #id { display: block; }} (前面的一堆是在做浏览器的初始化)

     

    NO2.不同浏览器的标签默认的外补丁和内补丁不同

        问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
        碰到频率:100%
        解决方案:css里    *{margin:0;padding:0;}
        备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

    NO3.块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大
        问题症状:常见症状是ie6中后面的一块被顶到下一行
        碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
        解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
        备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    NO4.设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度
        问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
        碰到频率:60%
        解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
        备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    NO5.行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第3种)
        问题症状:ie6里的间距比超过设置的间距
        碰到几率:20%
        解决方案:在display:block;后面加入display:inline;display:table;
        备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。(此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。)(这是关于display的介绍)

    NO6.图片默认有间距
        问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题2中提到的通配符也不起作用。
        碰到几率:20%
        解决方案:使用float属性为img布局
        备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

    NO7.标签最低高度设置min-height不兼容
        问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容
        碰到几率:5%
        解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
        备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

    NO8.点击问题

    <body>
        <a href="#" onclick="doSet1(event);">点一下</a> 
        <a href="#" onclick="doSet2(event);">点两下</a> 
    </body>
    <script type="text/javascript">
        function doSet1(event) {
            alert(event.target.innerHTML);
        }
        function doSet2(event) {
            alert(event.srcElement.innerHTML);
        }
    </script>

    在IE下需要点击"点两下",在firefox下需要点击"点一下"
    因为内核不同,一些内置对象的属性名称是不一致的,所以相同的js脚本可能在firefox下可用,而在IE下就不能用。(经测试IE无此BUG)

    不过:js脚本屏蔽浏览器差异最简单有效的方式:使用jquery。因为jquery内部已经实现了屏蔽浏览器差异

    NO9.透明度兼容设置

    发生概率:主要看你要写的东西设不设透明度

    解决方案:一句话

    transparent_class {   

        filter:alpha(opacity=50);   

           -moz-opacity:0.5;   

           -khtml-opacity: 0.5;   

           opacity: 0.5;   

     

    opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.

    filter:alpha(opacity=50); This one you need for IE.

    -moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.

    -khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .

    NO10.Box Model的bug(盒子模型bug)

    描述:给一个元素设置了高度和宽度的同时,还为其设置margin和padding的值,会改变该元素的实际大小。

    解决办法:在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。

    NO11.IE6中的列表li楼梯状bug

    描述:通常在li中的元素(比如a)设置了浮动float,但li本身不浮动。

    解决办法:

    ul li{float:left;}

    或 ul li{display:inline;}

    NO12.li空白间距

    描述:在IE下,会增加li和li之间的垂直间距

    解决办法:给li里的a显式的添加宽度或者高度

    li a{width:20px;}

    或者

    li a{display:block;float:left;clear:left;}

    或者

    li {display:inline;}

    li a{display:block;}

    或者

    在每个列表li上设置一个实线的底边,颜色和li的背景色相同

    NO13.overflow:auto;和position:relative的碰撞

    描述:此bug只出现在IE6和IE7中,有两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative;且高度大于父元素,在IE6-7中子元素不会被隐藏而是溢出。

    解决方案:给父元素也设置position:relative;

    NO14.浮动层的错位

    描述:当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。

    解决方案:overflow:hidden;

    NO15.IE6克隆文本的bug

    描述:若你的代码结构如下

    <!--这是注释-->

        <div>

           ……

       </div>

    <!--这是注释-->

    很有可能在IE6网页上出现一段空白文本

    解决方案:

    使用条件注释

    删除所有注释

    在注释前面的那个浮动元素加上 display:inline;

    NO16.IE的图片缩放

    描述:图片在IE下缩放有时会影响其质量

    解决方案:img{ -ms-interpolation-mode:bicubic;}//这个是解决图片失真的自带属性只有IE有

    NO17.IE6下png图片的透明bug

    描述:使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。

    解决方案:

    .img{

    background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');

    _background:0;

    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');

    }

    img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}

    <imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />

    NO18.<iframe>透明背景bug

       描述:在IE浏览器中,<iframe>框架不会自动把背景设为透明

       解决方案:

        <iframesrc="content.html"allowTransparency="true"></iframe>

       在iframe调用的content.html页面中设置

       body{background-color: transparent;}

    NO19.禁用IE默认的垂直滚动条

    解决方案:

    html{

       overflow:auto;

    }

    NO20.给光标设置自定义样式时,静态光标文件.cur的不同浏览器的兼容性问题

    发生概率:反正我碰见了,在火狐浏览器下死活出不来,其他完美

      If你写的语句没有问题,完全兼容。但就是有一两个光标样式出不来,换成其他能显示的光标就可以正常显示,那么恭喜你,碰到跟我完全一样的问题。是.cur文件的格式问题

     

    .cur的格式根据图片颜色深度的不同会产生不同的格式:

     

    通过改变颜色深度,调整格式,可以实现跨浏览器兼容。

    P.S. 因为我不是专门搞UI的,也不太懂cur图片,有些光标颜色深度256 colors在火狐下不识别,有些就可以,所以具体问题具体分析,都改改看,反正我这边truecolor这个深度的是所有图片都完全可以的兼容的。

    下面会附上制作cur光标的一个小软件RealWorldCursorEditor,可以用它来改颜色深度

     

    cursor:url(images/arrow.cur),auto; /* auto是当自定义图标不起作用时鼠标的状态*/ 

    NO21.在IE6下有些元素看起来被隐藏了,但重新刷新后会再次出现,这是由于,一个容器的高度被浮动元素撑破后面又紧跟着非浮动元素,并且这些非浮动元素有一些定义了:hover链接。

    解决方案:各种清除浮动。

    NO22.a(有href属性)标签嵌套下的img标签,在IE下会带有边框。

    解决:解决办法是加上a img{border:none;}样式。

    NO23.input边框问题。

    去掉input边框一般用border:none;就可以,但由于IE6在解析input样式时的BUG(优先级问题),在IE6下无效。
      ie6的默认CSS样式,涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则,先解析自身的默认CSS,再解析开发者书写的CSS,达到渲染标签的目的。IE6对INPUT的渲染存在bug,border:none;不被解析,当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。
    解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;,推荐用第三种方案。

    如果你觉得我帮到你了,买个肥宅快乐水,怎么样?哈哈哈哈哈哈

    展开全文
  • 移动端浏览器兼容问题

    千次阅读 2018-09-12 20:24:13
    目前,移动端的浏览器兼容问题也不少,在这里做下记录,便于以后查找问题。 1、click 300ms 延时响应 解决方案: 使用fastclick window.addEventListener("load", function () { FastClick.attach...
  • 前端跨浏览器兼容问题总结

    千次阅读 2018-10-19 18:54:31
    写小米网页的过程都是使用火狐浏览器调整页面布局,当用360浏览器和本机IE浏览器打开时,布局就错乱了。 问题1:在火狐浏览器上四张图片一排浮动在右侧,IE浏览器打开页面,产品图片一起跑到当前div块下方。...
  • 都是IE惹的祸多浏览器兼容问题
  • vue项目浏览器兼容问题

    千次阅读 2019-07-11 15:47:33
    浏览器兼容问题 Vue项目修改默认滚动条样式:element-ui隐藏标签el-scrollbar、vuescroll插件; IE浏览器不兼容vue-socket.io:vue-socket.io-extended结合socket.io-client; IE浏览器input[type=“password”]...
  • 主要介绍了js Date()日期函数浏览器兼容问题解决方法,需要的朋友可以参考下
  • .net和 vb WebBrowser 浏览器兼容问题自己封装的开发中遇到的第一次加载注册表可能未注册 F5一下就会成功
  • 下面小编就为大家带来一篇关于遇到的浏览器兼容问题及应对方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • JS浏览器兼容问题总结
  • 主要为大家详细介绍了ajax文件上传的相关资料,成功解决了浏览器兼容问题,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 305,859
精华内容 122,343
关键字:

浏览器兼容问题