各个浏览器之间的兼容问题

时间：2018-09-06 16:16:03 阅读：153 评论：0 收藏：0 [点我收藏+]

各个浏览器之间的兼容性问题，同样的HTML5和CSS5样式，但是浏览器表现的效果不一样。
一，什么兼容性问题，不正常的原因是什么？，应该怎么样让浏览器显示正常。
二，为什么浏览器会存在兼容性的问题？
1，同一个浏览器，版本越老存在的bug越多，越新的版本，对新标签和新的属性，新的特性支持越少。
2，不同的浏览器，核心技术不一样，标准不同，实现的方式也有差异，最终的效果也有差异。
三，处理兼容性问题的思路
one，要不要做？
1，从产品的角度，(产品的受欢迎程度，受欢迎浏览器的比例，效果优先还是基本功能优先？)
2，成本的角度，(有没有必要做一些功能？)
two，做到什么程度？
1，让那些浏览器支持那些效果？
three，如何做？
1，根据兼容需求选择技术框架，(jquery)等。
2，根据兼容需求选择兼容工具：html5shiv，Respond.js，CSS Reset，normalize.css，Modernizr.js，postcss，
3，条件注释，CSS hack，js能力检测做一些修补。
四，渐进增强和优雅降级
1，渐进增强：针对低版本的浏览器构建页面，保证基本功能，对高版本的浏览器，进行效果交互，和追加功能达到最好的用户体验。
2，优雅降级：一开始就构造完整的功能，然后对低版本的浏览器进行兼容处理。
。。。。。。
具体方法如下：
1，IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，注意：只有IE9以下的浏览器才能识别这种语法，其他浏览器仅仅认为是普通注释。

使用了条件注释的页面在IE9 及以前中可正常工作，但在IE10 以后不再支持。。。。。。。 2，CSS hack是利用浏览器遗留 bug 的原理来识别旧的浏览器。 .box{ color: red; _color: blue; /*只有IE6认识*/ *color: pink; /*只有IE67认识*/ color: yellow\9; /*IE浏览器都能识别*/ } 以下是一些常见属性的兼容情况 inline-block: >=IE8 min-width/min-height: >=IE7 :before，:after: >=IE8 div:hover: >=IE7 inline-block: >=IE8 background-size: >=IE9 圆角: >= IE9 阴影: >= IE9 动画/渐变: >= IE10 一些兼容写法范例： .clearfix:after{ content: ‘‘; display: block; clear: both; } .clearfix{ *zoom: 1; /* 仅对IE6/IE7有效，zoom:1触发hasLayout,起到类似BFC的效果 */ } .target{ display: inline-block; *display: inline; /*仅对IE67生效*/ *zoom: 1; /*仅对IE67生效*/ } 。。。。。。 ⑴可以针对不同的浏览器写CSS，针对不同的浏览器写不同的CSS 代码的过程，就叫CSS hack CSS Hack的原理是什么？由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，当不能识别下划线"_"，而firefox两个都不能认识。等等举个例子吧，设置背景颜色的代码，区别FF，IE7，IE6：background:orange，*background:green !important，*background:blue; 注：IE都能识别*，标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 所以，FIREFOX中是橙色，IE7是绿色，IE6中是蓝色。最后说一句，浏览器优先级别：FF

CSS: 1 .clear{clear:both;hegiht:0;overflow:hidden;} clear:both;是清除所有浮动；height:0;overflow:hidden;是用来改变IE6下标签有默认的低于10px的行高时将以10px的高度显示的bug。但是空标签清浮动会增加多余的代码 ③overflow：在需要清除浮动的腹肌标签中加入overflow即可，在IE6中不认识此属性则加入zoom：1；或者height：1%；css样式改为：.out{overflow:auto;zoom:1;}该属性对于父标签设置的高度小于子标签时，IE6/7、遨游则以下拉框形式出现，而火狐、谷歌、欧鹏、IE8会将子标签超出部分隐藏掉。 overflow:visible属性只能对IE6/7、遨游起作用，对火狐、谷歌、欧鹏、IE8无清浮作用。 overflow:visible(不剪切内容也不添加滚动条)/auto（是body对象和textarea的默认值，在需要时剪切内容并添加滚动条）/hidden（超出部分隐藏）/scroll（总是显示滚动条）; ④after清浮动：css样式为： .out{zoom:1;}/*==for IE6/7 Maxthon2==*/ outer:after {clear:both;content:"";visible:hidden;display:block;}/*==for FF/chrome/opera/IE8==*/ 其中clear:both;只清除所有浮动；content:"";display:block;对于FF/chrome/opera/IE8不能缺少，content（）可以取空值。 ⑤子标签浮动时，给父标签浮动 ⑥下一标签直接清浮动：兄弟标签浮动时，下一标签直接写入清除clear：both；就可以。 ⑦使用position：absolute；清除浮动。　　浏览器兼容问题十：空div默认行高问题症状：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用； HTML:

我是第一标题

我是第二标题

CSS: 1 *{ margin: 0; padding: 0; } 2 .div1{ width: 600px; height: 200px; background-color: #ccc; border: 1px solid #ff9673; margin: 100px auto 0; } 3 h2:hover{ color: red; } 4 a{ float: left; width: 200px; height: 30px; background: yellow; text-decoration: none; } 5 a:hover{ font-size: 50px; } 6 a:hover .h{ color: red; } 解决方案：解决办法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；备注：a{float:left}将a标签转化成块元素，这样可以设置宽和高。a:hover b{}当鼠标放在a标签上时，只是将a标签的b的内容隐藏掉，而不是将a隐藏掉。如果将a标签隐藏掉的，hover效果将消失，使display:none;失效。浏览器兼容问题十一：子选择器在IE6中不能使用问题症状：在IE6中，使用E>F子选择器无效果。解决方案：采用其他选择器或者后代选择器进行控制。浏览器兼容问题十二：input聚焦框颜色与样式不同问题症状：各个浏览器表现不同。解决方案：使用outline：none，清除默认样式之后再统一设置。备注：使用上述方法可以清除IE和chrome浏览器默认样式，Firefox还是原样。做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。 /* CSS hack*/ 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。】

各个浏览器之间的兼容问题

标签：比例研究 ie11 定义语法形式 one 圆角背景网站

原文地址：http://blog.51cto.com/13941970/2170986

踩

(0)

评论一句话评论（0）