精华内容
下载资源
问答
  • 常见浏览器兼容性问题

    千次阅读 2021-04-23 09:11:39
    常见浏览器内核: 1.图片边框的问题 ie8浏览器上 a>img 图片会出现蓝色边框 解决方法: common.css img { border:none; } 2.图片下间隙问题 ...3.IE低版本常见兼容性问题(了解) 1.ie6小高

    常见的浏览器内核:
    在这里插入图片描述

    1.图片边框的问题
    ie8浏览器上 a>img 图片会出现蓝色边框
    解决方法:

    common.css 
    img {  border:none;  }
    

    2.图片下间隙问题
    盒子套图片时,盒子底边框和图片底线有一个空白距离
    原因:图片和文字以基线对齐 下间隙其实就是基线和底线之间距离
    解决办法:

    vertical-align:middle;
    font-size:0;line-height:0;
    display:block; 
    

    3.IE低版本常见的兼容性问题(了解)
    1.ie6小高度盒子问题
    原因: ie6下有默认行高
    解决问题:

    line-height:0;
    font-size:0;
    

    2.ie6下浮动双边距问题 解决问题:给浮动元素 + _display:inline;

    3.ie7以下子元素相对定位,父盒子overflow失效问题 解决办法: 给父盒子也加相对定位

    4.ie8不支持图片格式为 .webp
    5.ie6支持:after,:before 不支持::after ,::before

    
    ```html
    
    1.不同浏览器的标签默认的margin和padding不同
    
    问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
     
    碰到频率:100%
     
    解决方案:CSS里    *{margin:0;padding:0;}
     
    备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,
    几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
    
    
    
    ```html
    2.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
    
    问题症状:常见症状是IE6中后面的一块被顶到下一行
    
    碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
    
    解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
    
    备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,
    横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,
    这就是一个必然会碰到的兼容性问题。
    

    3.设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

    问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

    碰到频率:60%

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

    备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    4.行内属性标签,设置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:talbe。
    
     
    
    5.图片默认有间距
    
    问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
    
    碰到几率:20%
    
    解决方案:使用float属性为img布局
    
    备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,
    但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
    (使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法)
    
     
    
    6.标签最低高度设置min-height不兼容
    
    问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
    
    碰到几率:5%
    
    解决方案:如果我们要设置一个标签的最小高度200px,
    需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    
    备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。
    容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。
    这时候我们就会面临这个兼容性问题。
    
     
    
    7.透明度的兼容CSS设置
    
     
    
    .transparent_class {  
          filter:alpha(opacity=50);  
          -moz-opacity:0.5;  
          -khtml-opacity: 0.5;  
          opacity: 0.5;  
    }   
     
    
     
    
     
    
    如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
    
    ◆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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,
    所以书写的次序是很重要的。
    
     
    
    8.IE6双边距问题:在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
    解决方案:设置display:inline;
    
     
    
    9.当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度
    解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
    
     
    
    10.图片默认有间距
    解决方案:使用float 为img 布局
    
     
    
    11.IE9以下浏览器不能使用opacity
    解决方案:
    opacity: 0.5;filter: alpha(opacity = 50);
    filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
    
     
    
    12.边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
    解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
    
     
    
    13.cursor:hand 显示手型在safari 上不支持
    解决方案:统一使用 cursor:pointer
    
     
    
    14.两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;
    且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;
    解决方案:父级元素设置position:relative
    
    展开全文
  • 常见浏览器兼容性问题与解决方案

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

    在学习浏览器兼容性之前,我想把前端开发人员划分为两类:

    第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。

    第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。

    文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题。(相关文章推荐:主流浏览器CSS 3和HTML 5兼容清单

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

    问题症状:随便写几个标签,不加样式控制的情况下,各自的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:talbe。

    浏览器兼容问题五:图片默认有间距

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

    碰到几率:20%

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

    备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

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

    问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

    碰到几率:5%

    解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

    备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

    浏览器兼容问题七:透明度的兼容CSS设置

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

    1. /* CSS hack*/ 

    我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

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

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

    比如这样一个CSS设置:

    1. 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)常见浏览器兼容性问题与解决方案(面试题目)

    (2)https://www.cnblogs.com/iceflorence/p/6646344.html


    备忘一下。


    展开全文
  • 一、常见浏览器内核: 内核名称:使用该内核的浏览器 Trident:ie/360兼容模式/搜狗 ...二、常见浏览器兼容性问题,原因及解决方法,hack技巧有哪些? 面对浏览器诸多的兼容性问题,经常需要通过修改CSS样式来调试

    一、常见浏览器内核:

    内核名称:使用该内核的浏览器

    1. Trident:ie/360兼容模式/搜狗
    2. Geoko:火狐firefox
    3. Presto:opera(后来改为Webkit又到了Blink内核)
    4. Webkit:谷歌(Webkit的分支Blink) safari 360极速模式(Blink)

    答题的时候如果记不住单词,可以写出四个类别分别代表的浏览器
    ie 火狐 opera 谷歌

    二、常见浏览器兼容性问题,原因及解决方法,hack技巧有哪些?

    面对浏览器诸多的兼容性问题,经常需要通过修改CSS样式来调试,其中用的最多的
    就是CSS Hack。所谓CSS Hack就是针对不同的浏览器书写不同的CSS样式,通过使
    用某个浏览器单独识别的样式代码,控制该浏览器的显示效果。
    

    答题时写四五个就行了

    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:alfha(opacity=50);filter:progid:

    更多可参考:
    https://www.jianshu.com/p/6afd596440bb

    展开全文
  • 前端常见浏览器兼容性问题解决方案 不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。 常见的浏览器...
  • 在前端开发中我们将会遇到关于浏览器的兼容的难题,以下是本小菜按个人思路总结的关于常见浏览器兼容性问题的原因和方法还有概括,方便以后的前端开发更好的学习: 首先我们知道浏览器的兼容性的概念 1.浏览器兼容...
  • 不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。 1.不同浏览器的标签默认的外补丁和内补丁不同 *{ margin:0; padding:0; } 2. 块属性标签float后,又有横行的margin情况下,在IE6显示...
  • 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
  • 所谓的浏览器兼容性问题,是指使用不同的浏览器来查看我们的网站,造成页面显示效果不统一的情况,所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。  在学习浏览器兼容性之前,我想把...
  • 无论在写什么项目,只要牵扯到浏览器总会出现大大小小的一系列兼容性问题,下面就总结下时常遇到的浏览器兼容问题,以及其解决的办法。1.问题之一:不同浏览器标签默认的外补丁和内补丁是不同,就此问题也会遇到兼容...
  • 1.360浏览器有多种模式,包含不同的内核,有时候在不同模式下网页不能正常显示(我的是在360极速浏览器安全模式下显示出错)。此时在标签中加入:// ,chrome=1" />其中:1)「http-equiv=”X-UA-Compatible”」这个...
  • 所谓浏览器兼容性问题,是指不同浏览器对同一段代码有不同的解析,导致页面产生的效果不一样。大多数情况下良好的用户体验需求应该是不同浏览器显示的页面都是相同的,因此,对于web开发来说,浏览器兼容性问题是一...
  • 浏览器兼容性问题及解决方法针对浏览器兼容问题将前端工作人员分为两类主要问题CSS hack 针对浏览器兼容问题将前端工作人员分为两类 一:精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,412
精华内容 30,964
关键字:

常见浏览器兼容性问题