常见的浏览器兼容问题和解决方法

为什么会有兼容问题？

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

使用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增加了许多新标签，低版本浏览器有点影响时代进步啊

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

• 问题症状：随便写几个标签，不加样式控制的情况下，各自的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是正道

问题六：标签最低高度设置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

使用hacker 我可以把浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）

• 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。

来源：https://blog.csdn.net/xustart7720/article/details/73604651/

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

/* 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识别 */

 

来源：https://blog.csdn.net/xustart7720/article/details/73604651/

 

越少的浮动，就会越少的代码，会有更灵活的页面，会有扩展性更强的页面。这不多说，归结为到一定水平了，浮动会用的较少。另外，您也会避免使用浮动+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 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 闭合(非常重要!)

关于 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 外面

 

web前端开发过程中，出现浏览器兼容问题，一般从什么角度考虑解决：

1、写代码的时候遵循W3C标准，按照最新稳定版本的IE或WebKit内核浏览器进行编码。
2、遇到部分无法全面解决浏览器兼容的时候，采取CSS的hack手段进行针对性微调。
3、遇到特别难解决的，可以用JS强制修改。

 

border:none与border:0的区别

体现有两点：

1、理论上的性能差异；

2、浏览器兼容性的差异。

1、性能差异：

【border：0】把border设为“0“像素虽然在页面上看不见，但按border默认值理解，浏览器依然会对border-width/border-color进行渲染，即已经占用了内存值。

【border：none】把border设为”none“即没有，浏览器解析”none“时将不作出渲染动作，即不会消耗内存值。

2、兼容性差异：

兼容性差异只针对IE6、IE7与标签button、input而言，在win、win7的XP主题下均会出现此现象。

当border为”none“时对IE6、IE7无效边框依然存在，如下图所示：

当border为”0“时对IE6、IE7，如下图所示：

当border为”0“或者”none“时Firefox下显示一致，如下图所示：

不同浏览器margin和padding差异较大

显示区别

对于IE,父元素用text-align:center;可实现父级元素内的子元素居中，

对于FF,子元素需要用margin：0 auto。

在IE6中无法设置微型高度

显示区别

 

 

 

1、居中问题

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

2、高度问题

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3、clear:both;

不想受到float浮动的，就在div中写入clear:both;

4、IE浮动 margin产生的双倍距离

#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5、padding问题

FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义。

6、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 外面

7、padding，marign，height，width的傻瓜式解决技巧

注意是技巧，不是方法：
写好标准头


高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

8、列表类

1. ul标签在FF中默认是有 padding值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

9、显示类（display:block,inline）

1. display:block,inline两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度

，

，

，

，

和
• 是块元素的例子
  display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。，，，，， 和 是 inline 元素的例子
  2.鼠标手指状显示
  全部用标准的写法 cursor: pointer;
  
  10、背景、图片类
  
  1. background显示问题
  全部注意补齐 width，height 属性
  2.背景透明问题
  IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
  IE: filter: alpha(opacity=10);
  FF: opacity:0.6;
  FF: -moz-opacity:0.10;
  最好两个都写，并将opacity属性放在下面
  
  11、min-height最小高度的实现（兼容IE6、IE7、FF）
  
  作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
  #mrjin {
  background:#ccc;
  min-height:100px;
  height:auto !important;
  height:100px;
  overflow:visible;
  }
  
  12、著名的 Meyer Reset（重置）
  
  html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
  { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0; 
  font-weight: inherit; 
  font-style: inherit; 
  font-size: 100%; 
  font-family: inherit; 
  vertical-align: baseline; 
  } 
  :focus { 
  outline: 0; 
  } 
  body { 
  line-height: 1; 
  color: black; 
  background: white; 
  } 
  ol, ul { 
  list-style: none; 
  } 
  table { 
  border-collapse: separate; 
  border-spacing: 0; 
  } 
  caption, th, td { 
  text-align: left; 
  font-weight: normal; 
  } 
  blockquote:before, blockquote:after, 
  q:before, q:after { 
  content: ""; 
  } 
  blockquote, q { 
  quotes: "" ""; 
  } 
  
  13、跨浏览器的CSS透明度
  
  .transparent { 
  opacity: 0.7; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70); 
  -moz-opacity: 0.7; 
  -khtml-opacity: 0.7;
  
  14、文字阴影（CSS3）
  
  .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
  
  15、Box阴影(CSS3)
  
  .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
  
  16、Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
  
  
   
  

   
  
   
  
  
  CSS:
  * { margin:0; padding:0; } 
  html, body, #wrap { height: 100%; } 
  body > #wrap {height: auto; min-height: 100%;} 
  #main { padding-bottom: 150px; } 
  #footer { 
  position: relative; 
  margin-top: -150px; 
  height: 150px; 
  clear:both;} 
  .clearfix:after {content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;} 
  .clearfix {display: inline-block;} 
  * html .clearfix { height: 1%;} 
  .clearfix {display: block;}
  
  17、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
  
  iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：
  【1】去掉背景色：filter:Chroma(Color=white);
  举例：
  【2】去掉背景图片：
  举例：
  注意：内嵌页面同时也要增加BODY属性：
  
  
  18、为什么web标准中无法设置IE浏览器滚动条颜色了？
  
  原来样式设置：
  
  解决办法是将body换成html。
  
  19、为什么中火狐浏览器下文本无法撑开容器的高度？
  
  标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
  div { height:auto!important; height:200px; min-height:200px; }
  
  20、如何定义1px左右高度的容器？
  
  IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
  
  21、怎么样才能让层显示在FLASH之上呢？
  
  解决的办法是给FLASH设置透明:
  :
  

  
  
  
  22、怎样使一个div层居中于浏览器中？
  
  
  
  23、怎样使div背景透明？
  
  首先，需要这两个层都是兄弟关系，其次，这两个层都需要绝对定位。举个例子：
  
  
  
  
  
  
  
  
  
  
  
  这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,
  
  
  
  BlueIdea,BlueIdea,BlueIdea 
  
  
  
  
  
  24、怎样去掉选中时的虚线框？
  
  利用οnfοcus="this.blur();"例如：测试
  
  25、ie6下png背景显示问题？
  
  针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);
  
  26、文字与表单对齐方法？
  
  设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:
  body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}
  
  27、optgroup标签的用法？
  
  optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：
  
  
  one select
  two select
  
  
  three select
  four select
  
  
  
  28、文字与图片垂直居中对齐方法？
  
  为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
  我要的坚强
  只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.
  
  29、文章标题列表中日期居右显示的两种方法？
  
  方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:
  方法A：
  这是文章标题2010-10-10
  然后定义p和span的样式：
  p{ position:relative}
  p span{ position:absolute; right:0}
  方法B:
  2010-10-10这是文章标题
  然后定义span右浮动:
  p span{float:right}
  
  30、ie6下max/min-width/height实现？
  
  ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.
  
  31、空白外边距互相叠加的问题？
  
  一般通过添加透明边框或者1px的内边距避免；
  其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
  其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px；
  例如：
  
  
  
  
  
  
  
  空白边距叠加[email protected]
  
  
  
  32、网页设计中的默认字体
  
  font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
  说明：line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高，对于12px字体，这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。
  
  33、浏览器兼容——常用的css hack
  
  （1）.title{ height:200px;
  *height:200px;
  _height:200px; }
  （2）.title{ height:200px;
  *height:200px !important;
  *height:200px; }
  （3）.title{ height:200px; }
  *html.title{ height:200px;}
  *+html.title{ height:200px;}
   
    

转载于:https://www.cnblogs.com/sunshinezjb/p/9247845.html