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

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

    为什么会有兼容问题?

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

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

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

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

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

    • 问题症状:随便写几个标签,不加样式控制的情况下,各自的marginpadding差异较大。
    • 碰到频率: 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后的横向marginbug。不过因它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe

    问题五:图片默认有间距

    • 问题症状:几个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设置

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


    技巧一:css hack

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

    • ie6认识的hack 是下划线_ 和星号 *
    • ie7 遨游认识的hack是星号 * (包括上面问题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,慎用marginheight尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:bothdiv宽尽量用margin,慎用paddingwidth算准实际要的减去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,strongeminline 元素的例子

    技巧四:怎样使一个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;}

    ②作为外部 wrapperdiv 不要定死高度,为了让高度能自适应,要在wrapper里面加上overflow:hidden; 当包含floatbox的时候,高度自适应在IE下无效,这时候应该触发IElayout私有属性用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 centerright的向下拉长,而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 闭合(非常重要!)

    将以下代码加入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的问题

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

    **技巧七:父级盒子的BFC **

    marign 重合问题: 当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。总的有以下解决方式:

    • 外层 padding
    • 透明边框 border:1px solid transparent;
    • .绝对定位 postion:absolute:
    • 外层DIV overflow:hidden;
    • 内层DIV 加 float:left;display:inline;
    • 外层DIV 有时会用到zoom:1;
    展开全文
  • 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。...

    为什么会有兼容问题?

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

    使用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/

    展开全文
  • 浏览器兼容问题一直是一个难缠的问题,从你开始想成为一名程序员,到深入学习,从最开始什么都会懂,到开始写代码.从你研究页面到最后的面试. 你经常能听到这个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;,推荐用第三种方案。

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

    展开全文
  • 目前,移动端的浏览器兼容问题也不少,在这里做下记录,便于以后查找问题。 1、click 300ms 延时响应 解决方案: 使用fastclick window.addEventListener("load", function () { FastClick.attach...
  • HTML5 video 标签浏览器兼容问题

    万次阅读 2017-07-21 17:53:21
    HTML5 video 标签浏览器兼容问题 小示例代码地址:https://github.com/danhuan/video-demo IE8、火狐、谷歌测试通过。使用需要注意的问题:1.多种格式视频不可以只有MP4格式,一定要引入Ogg格式视频,否则在火狐上...
  • 浏览器兼容问题

    千次阅读 2018-04-07 16:35:04
    一、浏览器兼容问题的常用解决方案对于浏览器的不一致问题,有两大类解决方法,第一类是采用迁就各方的"最小公分母"策略,也即选用所有浏览器都支持的方式来解决问题;第二类是采用客户端检测方案,客户端...
  • 前端面试——浏览器兼容问题

    千次阅读 2019-03-26 23:23:28
    前端面试——浏览器兼容问题一、css样式兼容性问题 一、css样式兼容性问题 ie8浏览器不支持css3,像: ie8对选择器支持情况 ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:...
  • 浏览器兼容问题 Vue项目修改默认滚动条样式:element-ui隐藏标签el-scrollbar、vuescroll插件; IE浏览器不兼容vue-socket.io:vue-socket.io-extended结合socket.io-client; IE浏览器input[type=“password”]...
  • 正在学习前端,看到一个新词叫浏览器兼容性, 请问浏览器兼容问题一般都有哪些呢? 通常怎么解决这些问题呢? xiexie~~
  • PC端微信内置浏览器兼容问题

    千次阅读 2019-08-05 14:18:53
    PC端微信内置浏览器兼容问题 微信自带浏览器用的是QQ浏览器X5内核,而X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎,目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于X5内核。 在PC端微信浏览器使用...
  • ES6中Promise浏览器兼容问题解决办法

    千次阅读 2019-04-21 15:24:54
    ES6中Promise浏览器兼容问题解决办法
  • 众所周知,浏览器兼容问题是开发人员经常会遇到的问题,它是由于不同浏览器的不同对代码的解析不同,而产生的在页面上显示的效果不同。那么,现在我把从工作当中发遇到的有关兼容问题及解决方案做个简单总结,...
  • 常见浏览器兼容问题

    2013-08-06 08:52:08
    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0...
  • vue项目中浏览器兼容问题 1.安装 npm install --save babel-polyfill 2.在main.js中引入(最好放在最前面) import 'babel-polyfill' 3.在webpack.base.conf.js中配置 module.exports = { ...... entry: { app: ...
  • 浏览器兼容问题及解决方案 兼容问题:不同浏览器的标签默认的margin,padding值不同: 解决方案:css: *{margin:0;padding:0;} 兼容问题:ie6,7下有行高 解决方案:overflow:hidden 或者设置设置固定行高...
  • vue iview 浏览器兼容问题(支持IE9) 支持到IE9 如果遇到问题, 可以给我留言. 说明具体的问题. js 我们根据浏览器的用户代理字符串, 来区别出是哪种浏览器的哪个版本. 然后, 我们就要根据版本来进行兼容了. vue ...
  • css作业,发同学电脑用360运行结果存在问题,发现只有360浏览器显示页面不对,于是发现与兼容性。 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于...
  • (1)浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;}...
  • LoadRunner与浏览器兼容问题

    千次阅读 2016-02-17 11:18:51
    LoadRunner与浏览器兼容问题(转) LoadRunner支持的IE版本: 8.0 最高ie6 8.1 最高ie6 9.0 最高ie7 9.5 最高ie8 11.0 最高ie9( win7 32位+LR11+IE10可用,但win7 64位+LR11+IE10不可用,降至IE9可用),支持...
  • Promise浏览器兼容问题

    千次阅读 2019-02-14 10:17:54
    文章目录Promise 在360浏览器兼容模式下无法运行 Promise 在360浏览器兼容模式下无法运行 解决方案 npm install babel-polyfill --save 修改 entry: { app: ['./node_modules/babel-polyfill/dist/polyfill.js','....
  • 浏览器兼容性问题产生的原因 归根结底,不同操作系统下浏览器兼容问题产生的原因还是在网页开发过程中使用的一些技术的标准和不同的操作系统和浏览器不是完全兼容的。实际上主要是CSS(Cascarding Style Sheets)样式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,906
精华内容 9,562
关键字:

浏览器兼容问题