首页 > 编程知识 正文

浏览器兼容性解决方案,web浏览器的兼容性如何解决

时间:2023-05-03 15:40:06 阅读:196129 作者:3627

浏览器兼容性问题适配,通过单独写css样式,适配各类浏览器兼容性,特别是针对IE8-9。

1-1.条件性注释(Conditional comments)

[只有IE9及以前版本支持]

引入语法:

在css里使用如下标识符可以被ie识别而采用,其他浏览器会忽略if ie。

<!--[if !IE]> 除IE外都可识别 <![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--><!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--><!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--><!--[if IE 7]> 仅IE7可识别 <![endif]--><!--[if lt IE 7]> IE7以下版本可识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--><!--[if IE 8]> 仅IE8可识别 <![endif]--><!--[if IE 9]> 仅IE9可识别 <![endif]-->

 

引入示例:

//方式一:引入样式差异化<!--[if IE 6 ]><link rel="stylesheet" type="text/css" media="all" rel="external nofollow" href="./ie6.css" /><![endif]-->//方式二:页内差异化<!--[if IE 6]><style type="text/css"> /* 针对IE6定义的样式 */</style><![endif]-->//方式三:行内差异化<!--[if IE 7 ]> <html class="ie7"> <![endif]-->

1-2.条件性注释效果如何适用于IE10/11上

 

可耐的中心:使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术

IE9是支持条件性注释的。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

在html网页的head里加入上面的元标记,这样IE10/11就能识别条件性注释了,我们也就可以像IE6/7/8那样编写针对性的CSS代码了。但这样做有个弊端,很显然,浏览器这样就会才能IE9的渲染模式,而不是最新的IE10/11技术。

 

无聊的手套:使用媒体查询语句+-ms-high-contrast属性

 

CSS的媒体查询语句(media query)是一种高级的CSS条件语句,它能根据一些属性和属性值计算判断CSS是否可以生效。在这里,我们要使用一个IE10/11独有的属性,它就是-ms-high-contrast,只有IE10/11实现了这个属性,它可以有两个值active或none,使用下面的媒体查询语句:

 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {/* IE10+ CSS styles go here */}

火狐浏览器、谷歌浏览器不能识别这个属性,所以不会执行这个查询语句里的CSS,从而实现了条件性执行的效果。

 

方法三:使用Javascript判断浏览器的类型

先用JavaSCript判断是否是IE浏览器,如果是,就在页面的<html>标记上添加一个“ie”的类名:

 

var ms_ie = false;var ua = window.navigator.userAgent;var old_ie = ua.indexOf('MSIE ');var new_ie = ua.indexOf('Trident/'); if ((old_ie > -1) || (new_ie > -1)) { ms_ie = true;} if (ms_ie) { document.documentElement.className += " ie";}

有了这个标志性css class后,我们就可以在CSS里区别性的编写css代码了。

 

.testClass{ /*这里写通用的css*/ }.ie .testClass{ /*这里写专门针对IE的css*/}

2.CSS hack【重点】

 

CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

语法参考表:

上图说明:这里S代表standard标准模式,Q代表Quirks怪异模式

 

示例:

 

<style type="text/css">.color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色 */ background-color: #FF00009; /*IE8及以上的浏览器会显示红色 测试8-10都显示红色*/ background-color: #ff6600; /*IE8及以上的浏览器会显示橙色 测试8-11都显示橙色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色 测试5、7蓝色*/ +background-color: #FFFF00; /*IE6、IE7会变为黄色 测试7黄色*/ _background-color: #009933; /*IE6会变为绿色 测试 5绿色*/}</style>

 

HTML div右边怎么加边框

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。