对于形形色色的浏览器,随之而来的就是一些兼容问题,大多应该都是IE下的兼容问题,因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而先造成的,所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果!

条件表达式(注:条件注释只能用在IE5-IE9,因为微软已经在IE10以后的版本中已禁用IE特有的条件注释功能,详情见:https://msdn.microsoft.com/zh-cn/library/ie/hh801214%28v=vs.85%29.aspx

    <!--[if IE n]>
...
<![endif]-->
<!--专对于IEn的一些样式-->
<!--[if gt IE n]>
...
<![endif]-->
<!--专对于IEn以上版本的一些样式-->
<!--[if lt IE n]>
...
<![endif]-->
<!--专对于IEn以下版本的一些样式-->
<!--[if gte IE n]>
...
<![endif]-->
<!--专对于IEn及以上版本的一些样式-->
<!--[if lte IE n]>
...
<![endif]-->
<!--专对于IEn及以下版的一些样式-->
  <!--[if !ie]><-->
    <!--<![endif]-->
<!--专对于除IE以外的一些样式-->

条件样式不但能用在样式上,还能用在javascript上,但是请留意条件注释只会在IE9及以下版本下识别。

例如下面这一段代码只会在IE9下才会起用用,但是你把9改成10,在IE10下是没有任何效果的

  <!--[if IE ]>
<style type="text/css">
.typ{background:blue}
</style>
<script type="text/javascript">
alert("this is IE浏览器!");
</script>
<![endif]-->
  <!--下面的这一段代码在IE10下是没有任何效果的-->
  <!--[if IE ]>
<style type="text/css">
.typ{background:blue}
</style>
<script type="text/javascript">
alert("this is IE浏览器!");
</script>
<![endif]-->
<!--下面的这一段代码除了在火狐,chrome下会弹出外,在IE10也会弹出-->
  <!--[if !ie]><-->
    <script type="text/javascript">
alert("this is not IE浏览器!");
  </script>
    <!--<![endif]-->

综上所述,条件注释只能用来用来解决IE9下的兼容问题,当然一般遇到样式兼容问题一般都是IE6-IE8下。

cssHack解决样式兼容问题:cssHack分为从css选择器和css属性上来区别不同的Hack写法

css选择器写法

/*1、IE6以及IE6以下版本浏览器*/
* html .demo {color: green;} /*2、仅仅IE7浏览器*/
*:first-child+html .demo {color: green;} /*3、除IE6之外的所有浏览器(IE7-9, Firefox,Safari,Opera)*/
html>body .demo {color: green;} /*4、IE8-9,Firefox,Safari,Opear*/
html>/**/body .demo {color: green;} /*5、IE9+*/
:root .demo {color: red;} /*6、Firefox浏览器*/
@-moz-document url-prefix() {
.demo {
color: red;
}
} /*6、Webkit内核浏览器(Safari和Google Chrome)*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo { color: red; }
} /* 7、Opera浏览器*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
head~body .demo { color: red; }
} /*8、iPhone / mobile webkit*/
@media screen and (max-device-width: 480px) {
.demo { color: red }
}

CSS属性Hack写法

/*1、IE6浏览器*/
.demo {_color: red;} /*2、IE6-7浏览器识别*/
.demo {*color: red;} /*3、所有浏览器除IE6浏览外*/
.demo {color/**/:red;} /*4、IE6-9浏览器*/
.demo {color: red\9;} /*5、IE7-8浏览器*/
.demo {color/*\**/:red\9;}

使用实例

.demo {
color: red;/*所有现代浏览器*/
color: green\9;/*所有IE浏览器*/
color: lime\0;/*IE8-9浏览器*/
*color: red;/*IE6-7浏览器*/
+color: blue;/*IE7浏览器*/
_color: orange;/*IE6浏览器*/
}
:root .demo {color: #963\9;}
@-moz-document url-prefix(){
  .demo{color:#897;}/* all firefox */
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.demo { color: #000; }/*webkit*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
head~body .demo { color: red; }/*opera*/
}

其实据个人工作经验大多布局兼容问题都会发在IE6-IE8,对于现代浏览器基本没什么兼容问题,所以记住常用IE下的兼容写法就好啦!

详细原文见:http://www.w3cplus.com/create-an-ie-only-stylesheet

详细原文见:http://www.w3cplus.com/css/create-css-browers-hacks

 

浏览器兼容之条件注释,cssHack的更多相关文章

  1. 使用条件注释判断 IE 浏览器版本

    IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...

  2. IE6浏览器兼容问题及部分解决方案(网上整理)

    作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...

  3. HTML中的IE条件注释,让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案

    最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘.  HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...

  4. IE的条件注释

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...

  5. HTML中的IE条件注释

    IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...

  6. HTML在IE中的条件注释

    HTML在IE中的条件注释 HTML的条件注释在IE5中被首次引入,直到IE9.一直都是简单地判定用户浏览器(IE,非IE,IE版本)的一种手段,而在IE10的标准模式下,条件注释功能被停止支持(兼容 ...

  7. 关于IE条件注释(译)

    本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...

  8. 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)

    前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...

  9. 针对主流浏览器的CSS-HACK写法及IE常用条件注释

    一.通用区分方式: IE6.IE7能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识别 !important:IE7能识别*,也能识别 !important:IE8能识别\0,不能识别 ...

随机推荐

  1. BZOJ2329:[HNOI2011]括号修复

    浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...

  2. ContextMenu的自定义

    1.针对整个ContextMenu, 自定义一个Style,去掉竖分割线       <Style x:Key="DataGridColumnsHeaderContextMenuSty ...

  3. javascript私有属性失效及解决方案

    1.js创建私有属性的方法 在 javascript 中所有对象的成员是公有的 构造函数也是如此: function Gadget ( ) { this.name = ' jack '; this.p ...

  4. 开源LTE代码分析

    跟踪了一个在将开源组织-OpenLTE(将4G通信网络LTE开源),现将自己梳理整理的一些文档Post出来,请有相同兴趣的朋友指点: 一,系统介绍 OpenLTE是一位Mot的工程师在12年发起的一个 ...

  5. C#窗体上绘制矩形

    先上效果图 鼠标三个事件 private void Form1_MouseDown(object sender, MouseEventArgs e) { //记录开始点 this.mousedown ...

  6. C# 中的迭代器 yield关键字 提高性能和可读性

    展示一个例子 IList<string> FindBobs(IEnumerable<string> names) { var bobs = new List<string ...

  7. phpstudy配置php7.1.11

    php7.1.11下载地址 http://windows.php.net/download/ 下载之后,解压. 重名的为php-7.1.11-nts 移动到phpStudy的php目录下 然后重启ph ...

  8. 2014-10-4 NOIP模拟赛

    1.某种密码(password.*) 关于某种密码有如下描述:某种密码的原文A是由N个数字组成,而密文B是一个长度为N的01数串,原文和密文的关联在于一个钥匙码KEY.若KEY=∑▒[Ai*Bi],则 ...

  9. Opencv级联分类器实现人脸识别

    在本章中,我们将学习如何使用OpenCV使用系统相机捕获帧.org.opencv.videoio包的VideoCapture类包含使用相机捕获视频的类和方法.让我们一步一步学习如何捕捉帧 - 第1步: ...

  10. Python内建函数一

    内建函数 1. abs(number) 用法:返回数字的绝对值 2. all(iterable) 用法:如果iterable的所有元素都是真值,就返回True,否则返回False 3. any(ite ...