坚持每天做总结。今天下班还算早。写个跟css兼容有关的知识点。便于后期查看与学习。
一、先说说各种主流浏览器的内核

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不同的浏览器内核对网页编写的解释也不同，反映在网页上的效果也会有所差别。

浏览器 　IE firefox chrome safari opera
内核

Trident

Gecko

Webkit

Webkit

Presto

当然，各种浏览器内核在不断更新中，表格只能作为一个简单参考，像Chromium/Bink等内核，还有各种浏览器内核的具体了解，感兴趣的可以上网查查。

因为不同浏览器的不同内核，导致了不同的渲染效果，我们在实际开发中，为了达到一致的效果，所以就出现了兼容性问题。

二、css Hack

　　css Hack 的目的就是使CSS代码兼容不同的浏览器.

　　大致有3种表现形式：
CSS类内部Hack比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * ".
选择器Hack:比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
HTML头部引用(if IE)Hack:针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->条件注释法等.
　　书写顺序，一般是将识别能力强的浏览器的CSS写在后面。
 
下面是一些常用的CSS Hack方法
1 条件注释法
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!-->

例如以上代码：

<!--[if IE] > IE下要执行的代码   <![endif]--> 表示如果是IE浏览器的话就执行写在里面的代码，不是的话就不执行。
　　gt ：代表大于；
　　lt : 代表小于；
　　gte : greater than or equal 
　　lte : less than or equal
  　! :选择条件版本以外的所有版本
例如：<!--[if lt IE 7]> 就代表如果是IE7以下的版本。
2 类内属性前缀
在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。例如：
.test{

color:#000; /* 正常写法普遍支持 */

color:#00F\9; /* 所有IE浏览器(ie6+)支持 */

/*但是IE8不能识别“ * ”和“ _ ” */

[color:#000;color:#0F0; /* SF,CH支持 */

color:#00F\0; /* IE8支持*/

*color:#FF0; /* IE7支持 */

_color:#F00; /* IE6支持 */

}
  • “-″减号是IE6专有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
  • IE6以下能识别*；不能识别 !important;
  • FF不能识别*，但能识别!important;

3 选择器前缀法

* html .test{color:#090;} /* For IE6 and earlier */

* + html .test{color:#ff0;} /* For IE7 */

*html *前缀只对IE6生效*+html *+前缀只对IE7生效。

当然总结的这些不够详细和全面，具体应用还得在实际开发中依据情况而定。

二、css兼容性的相关问题

1、padding 与 margin 问题
      不同的浏览器，对默认的margin和padding解析方式不同
      解决方案:
      body{
    　　margin:0px;
   　　 padding:0px;
      }
   2、居中布局
      ff,chrome....通过 margin:auto方式完成块级元素居中显示
      ie6及以下，主要通过 text-align:center;方式完成所有元素的居中(包含块级)
      body{
   　　 margin:auto;
    　　text-align:center;
      }
   3、元素高度与内容
      内容高度超出定义高度后，ie6，自适应，其他浏览器，溢出。
      解决方案:
         overflow属性;
   4、子元素设置上外边距时对父元素的影响
      解决方案：
         (1)、父元素 加 border
     (2)、设置父元素的padding-top取代子元素的margin-top

　　(3)、参见我的博客中的相关文章有介绍更多方法。

三、CSS3浏览器前缀

我们在用到css3的一些属性时，为了达到浏览器的兼容性，通常会加一些前缀，比如：-webkit-, -ms-等等。

这些前缀其实是浏览器的私有属性。

//浏览器前缀:

      -webkit-transform: translateX(x)  //Safari and Chrome

      -o-transform:  translateX(x)        //Opera

      -moz-transform: translateX(x)    //Firefox

      -ms-transform:   translateX(x)   //IE

。。。。。。。

下班啦。拜拜。

css Hack 以及css的一些兼容问题小结的更多相关文章

  1. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  2. 简述几个css hack?【CSS】

    (1) 图片间隙  在div中插入图片,图片会将div下方撑大3px. hack1:将<div>与<img>写在同一行. hack2:给<img>添加display ...

  3. CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  4. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  5. CSS hack技术

    首先我们要了解一个概念CSS hack 不同浏览器,比如IE6.IE7.IE8,Mozilla Firefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样. 这个时候我们 ...

  6. CSS hack大全

    1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以 ...

  7. 常用的CSS Hack技术集锦

    来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...

  8. CSS hack常用方案（摘选）

    邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...

  9. CSS Hack是什么意思

    CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...

随机推荐

  1. 终于用scons创建了一个MDK工程

    这几天我在学着怎么使用RT-Thread.起初只想用一下里面的RTGUI,却一直没成功,功力实在不行啊. RT-Thread用了scons来创建工程,似乎还能编译,还有很多可配置项,很是方便.于是我想 ...

  2. Eclipse下如何导入jar包【转载】

    我们在用Eclipse开发程序的时候,经常想要用到第三方的jar包.这时候我们就需要在相应的工程下面导入这个jar包.以下配图说明导入jar包的步骤. 1.右击工程的根目录,点击Properties进 ...

  3. delphi Edit - TActionList

    Edit     TEditCut     TEditCopy     TEditpaste     TEditSelectAll     TEditUndo     TEditDelete   编辑 ...

  4. jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

    程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...

  5. 发布站点到远程FTP根目录

    第一步:修改 phpcms/modules/admin/templates/site_add.tpl.php 找到 <legend><?php echo L('release_poi ...

  6. Ubuntu开机时出现&quot;没有正确安装GNOME电源管理器的默认配置

    1:在登录界面.按Ctrl+Alt+F1,进入控制台命令行模式 2:先输入username,回车,然后输入password,登录成功 3:输入df -h,这个命令是查看硬盘空间的.能够看一下.你的ho ...

  7. 如何在Ubuntu 13.04中升级到 GNOME 3.8

    如何在Ubuntu 13.04中升级到 GNOME 3.8 添加 GNOME 3 PPA(Personal Package Archives) 在你进一步浏览之前,确认你正在运行的是Ubuntu 13 ...

  8. PAT 1018

    1018. Public Bike Management (30) There is a public bike service in Hangzhou City which provides gre ...

  9. truncate 与 delete 的区别

    Delete删除的数据可以通过日志文件进行恢复 Truncate Table删除的数据不能进行恢复 Delete删除时,标识列取值保留原使用中最大值 Truncate Table删除时,标识列恢复到最 ...

  10. 实例源码--Android自定义Gallery动画效果

    相关文档与源码: 下载源码   技术要点: 1.自定义控件的使用 2.Gallery控件的使用实例 3.详细的源码注释 ...... 详细介绍: 1.自定义控件的使用 本套源码通过自定义控件的方式,继 ...