用条件注释判断浏览器版本解决页面兼容问题

2024-06-24 11:03:59阅读量:32 字体:

对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8、IE9上可能好好的,当我们在IE6、IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢?
首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因为不同的浏览器在解析页面时,他们所遵循的规则并不是完全相同的。比如IE,不同的版本解析都不同,何况是不同的浏览器厂商,不同的内核呢。但是我们在遇到兼容性问题时,应该首先检查我们自己写的代码,看看是不是自己的问题,然后再去追究浏览器的问题。还有,在遇到兼容性问题时,不要动不动就用CSS Hack技术,因为CSS Hack技术并不是W3C所推崇的,因此,不到万不得已,尽量不要用。
好了,说了一大堆,下面我们进入正题:
注释不同的浏览器版本
(1)、支持所有的IE浏览器(不包括IE10标准模式)

(2)、所有非IE浏览器(不包括IE10标准模式)
只有非IE浏览器显示(不包括IE10)
(3)、IE10浏览器
目前还没有找到该版本浏览器的像
(5)、IE8浏览器

(6)、IE7浏览器

(7)、IE6浏览器

(8)、IE10以下版本浏览器(不包括IE10)

(9)、IE9及IE9以下版本浏览器(包括IE9)

(10)、IE6以上版本浏览器(不含IE6)

(11)、IE7及IE7以上版本浏览器

那么我们该怎么运用呢?我们不可能为了兼容像上面那么写,把整页的内容分别写在不同的注释块内。其实这里有两种方法:
方法1、根据不同的浏览器版本,载入不同的css
如我们需要分别兼容IE6、7、8,我们可以这样做

用条件注释判断浏览器版本解决页面兼容问题

方法2、根据不同的浏览器版本,给html或body挂载不同的类如

最后我们看一下lt,lte,gt,gte分别表示什么
lt:小于当前版本
lte:小于或等于当前版本,包括本身
gt:大于当前版本
gte:大于或等于当前版本,包括本身
好了,我们今天就到这里,大家可能已经知道怎么简单的处理浏览器兼容了,那么下次我们接着介绍一些CSS Hack技术,更进一步的处理浏览器兼容
测试代码:


推荐阅读

  • 苹果怎么关闭腾讯视频自动续费

    苹果怎么关闭腾讯视频自动续费

    可以通过腾讯视频app或者微信app关闭腾讯视频自动续费。苹果关闭腾讯视频自动续费的具体操作方式如下: 苹果怎么关闭腾讯视频自动续费 一、以腾讯视频为例 1、打开腾讯app,进入vip会员&rdquo...

    阅读: 722

  • 光遇怎么退出当前账号

    光遇怎么退出当前账号

    《光·遇》是由游戏制作人陈星汉及其团队Thatgamecompany开发的社交冒险游戏。以下是推出光遇当前账号的操作方法: 光遇怎么退出当前账号 1、打开光遇app,在初始呈现界面中找到...

    阅读: 746

  • 微信接龙管家小程序怎么用

    微信接龙管家小程序怎么用

    接龙管家小程序,解决了微信/QQ群消息刷屏、无统计、无反馈、无留存的痛点。以下是如何使用微信接龙管家小程序的操作方法: 微信接龙管家小程序怎么用 1、打开微信app,点击搜索按钮,搜索接龙小程序&rd...

    阅读: 733

  • vivo手机查定位找手机

    vivo手机查定位找手机

    vivo手机系统有查定位找手机的功能,可以利用vivo公司的云服务功能来进行查定位找手机,操作步骤如下: vivo手机查定位找手机 1、打开手机的设置,点击首行的个人头像,进入账号中心页面中。 2、...

    阅读: 742

  • ipad一直语音播报触屏滑不了

    ipad一直语音播报触屏滑不了

    ipad一直语音播报触屏滑不了是因为ipad开启了旁白的功能,需要去设置内把该功能进行关闭,操作步骤如下: ipad一直语音播报触屏滑不了 1、打开ipad的设置,点击辅助功能”按钮,进入...

    阅读: 813

  • 苹果下载记录永久删除

    苹果下载记录永久删除

    苹果手机的下载记录是不能删除的,但是可以设置隐藏起来不显示在已购项目中,操作方法如下: 苹果下载记录永久删除 1、打开手机的App Store,点击右上角的苹果id头像,进入账户的页面。 2、点击已...

    阅读: 760