html网页设计,判断浏览器加载不同样式的实现

本文阅读 2 分钟
广告

仍然是前端的问题,毕竟自己投的简历都是前端开发,然而论技术还是稍微有所不足,所以还是收集资料先练习,就看未来一周能不能过公司的考核期了。关于浏览器的兼容问题,一直是前端开发里面比较让人头痛的,判断浏览器来加载不同的样式是一种比较明显的解决方式,唯一的缺点是体现在代码量会很大,因为要写N多css代码,特别是IE这种都要写。
以下资料来源于csdn博客用户liguangming19881204的博文,主要针对IE浏览器。

所有的IE都起作用:

<!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

IE以外的浏览器起作用:

<!--[if !IE]><!-->  <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->

只有IE7起作用:

<!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->

只有IE6起作用:

<!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="ie6.css"/> <![endif]-->

只有IE5起作用:

<!--[if IE 5]>  <link rel="stylesheet" type="text/css" href="ie5.css"/> <![endif]-->

只有IE5.5起作用:

<!--[if IE 5.5000]>  <link rel="stylesheet" type="text/css" href="ie55.css"/> <![endif]-->

只对IE6及以下的版本起作用:

<!--[if lt IE 7]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->
<!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->

只对IE7及以下的版本起作用:

<!--[if lt IE 8]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->
<!--[if lte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->

只对IE8及以下的版本起作用:

<!--[if lt IE 9]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->
<!--[if lte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->

只对IE6及以上的版本起作用:

<!--[if gt IE 5.5]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->
<!--[if gte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->

只对IE7及以上的版本起作用:

<!--[if gt IE 6]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->
<!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->

只对IE8及以上的版本起作用:

<!--[if gt IE 7]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->
<!--[if gte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/708/
html中关于区块高度自增长实现
« 上一篇 05-06
bootstrap框架的使用体验
下一篇 » 05-12
广告

发表评论

V注册会员 L评论等级
R3 条回复
  1. 李安Lv.2 说道:
    2018-05-07     Win 10 /    Chrome

    2.3后台釆集没有图片怎么为?

    1. 不暇VLv.6 说道:
      2018-05-08     Android /    Chrome

      @李安

      有bug,自己解密改好就行,另外不建议用1.8以上版本后台采集

      1. 李安Lv.2 说道:
        2018-05-08     Win 10 /    Chrome

        @不暇

        改了也不行

没有更多评论了

作者信息

热门文章

标签TAG

热评文章