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

仍然是前端的问题,毕竟自己投的简历都是前端开发,然而论技术还是稍微有所不足,所以还是收集资料先练习,就看未来一周能不能过公司的考核期了。关于浏览器的兼容问题,一直是前端开发里面比较让人头痛的,判断浏览器来加载不同的样式是一种比较明显的解决方式,唯一的缺点是体现在代码量会很大,因为要写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]-->
发表评论
加载中...
    1. 李安   2018-05-07 23:00

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

      查看对话
        1. 不暇   2018-05-08 08:41

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

          查看对话

相关文章