先来个冷笑话:一晚下班回家,一民警迎面巡逻而来。突然对我大喊:站住! 民警:int类型占几个字节? 我:4个。 民警:你可以走了。 我感到很诧异。 我:为什么问这样的问题? 民警:深夜还在街上走,寒酸苦逼的样子,不是小偷就是程序员

作为一个后端程序员,之前知道的css都是皮毛,因为有专业的美工帮我们做静态页面,我们只需要做好页面数据填充,专心写逻辑代码。现在有一种想去从事web前端开发了,尽管知道一些js的主要概念,原型,原型链,上下文,闭包之类的,但貌似都不是很深入,想想还是先从css开始吧,有时候很简单的某些样式却总是写的很痛苦。所以今天就看了css手册,点滴积累吧。

什么是css hack

  我自己的理解定义,就是针对不同的浏览器在对某些css属性做解析的时候出现的差异,我们去coding css这些差异的过程。看了css hack知道有

  1.条件hack

 <!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->
<keywords>取值有
  

  lt 小于
  gt  大于
  gte 大于或等于
  lte 小于或等于
  ! 非
<version>取值有
可以是6/7/8/9...
例如 以下表示浏览器是小于ie7的:
 <!--[if lt IE 7]>
<style>
.test2{width:100px;height:100px;background:blue}
</style>
<![endif]-->
以下例子是ie7的,这个是有效果的:
<!--[if IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->
2.属性级hack
代码如下:
#test{
color:#c30; /* For Firefox */
color:red\0; /* For Opera */
color:yellow\9; /* For IE8+ */
*color:blue; /* For IE7 */
_color:#ccc; /* For IE6 */
}
3.选择符级hack
* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
还有一点小知识是让一个内联元素可以设置宽高 目前知道有display:block/inline-block 或者设置position:absoulte或者设置float等
最后 -music

  白天总是很忙
  晚上总很慌
  都说前面有光
  谁能给谁方向
  看起来他和她似乎都很风光
  低头承认渺小不如坚强上场

  每天问问自己
  是否尽全力
  不学百般心机
  过程是奖励
  你一直站在光能照到的地方
  只要相信自己其实每个人都一样

  多一个人和你分享
  少一点难自己肩扛
  我们都是笨小孩但不忘挺起胸膛
  多一个人和你分享
  少一点难自己肩扛
  相信自己迟早会发光发亮

  每天问问自己
  是否尽全力
  不学百般心机
  过程是奖励
  你一直站在光能照到的地方
  只要相信自己其实每个人都一样

今天才知道css hack是什么的更多相关文章

  1. 说说css hack,说真的,我也是才去了解这个东西

    之前在很多地方看到css hack,今天狠下心,看看到底是什么鬼,所有我去百度了,然后看了一篇文章,然后写个小总结. css hack就是通过加一些特定的符号,不同的浏览器可以识别特定符号的样式,以此 ...

  2. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

  3. CSS hack方式一览【转】

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  4. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  5. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

  6. 史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  7. [转]史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  8. 转 CSS hack:针对IE6,IE7,firefox显示不同效果

    CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要. 区别不同浏览器的CSS hack写法: 区别IE6与FF:  ...

  9. CSS Hack(转)

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

随机推荐

  1. mac 下有些工具 app 推荐

    打开推荐报价mac在工具app Evernote的 Evernote的贬值,课堂笔记软件,其主要功能是记录笔记,假设你想,它可用于使todo list, 甚至gtd, 或收集的知识归纳 Doit.im ...

  2. 新秀系列C/C++经典问题(六)

    类包含一个指向成员复制 称号:下面是类和执行的阵列的声明.题.并针对存在的问题提出几种解决方式. template<typename T> class Array { public: Ar ...

  3. Directx11学习笔记【一】 最简单的windows程序HelloWin

    声明:本系列教程代码有部分来自dx11龙书及dx11游戏编程入门两本书,后面不再说明 首先,在vs2013中创建一个空的解决方案Dx11Demo,以后的工程都会放在这个解决方案下面.然后创建一个win ...

  4. 开源Math.NET基础数学类库使用(12)C#随机数扩展方法

    原文:[原创]开源Math.NET基础数学类库使用(12)C#随机数扩展方法                本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p ...

  5. bitnami redmine 安装插件

    https://wiki.bitnami.com/Applications/BitNami_Redmine_Stack#How_to_install_a_plugin_on_Redmine.3f 版权 ...

  6. SDUT 2498-AOE网上的关键路径(spfa+字典序路径)

    AOE网上的关键路径 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 一个无环的有向图称为无环图(Directed Acycl ...

  7. 使用SQLServer 2008的CDC功能实现数据变更捕获

    原文:使用SQLServer 2008的CDC功能实现数据变更捕获 最近由于工作需要,研究了一下2008 CDC功能,觉得还不错,下面整理了一下研究过程,虽然比较粗略,但是基本上能用了,如果有补充请大 ...

  8. nginx 1.4.2 安装笔记

    顺便吐槽一下,有道笔记的排版太难用了, 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 ========================================== ...

  9. Android文本Flood it游戏源代码

    flood_it 流行的Flood it游戏的Android版 游戏玩法: 按下屏幕下方的颜色button,左上角的色块就会变颜色.仅仅要把整片色块变成同色就赢了. 效果图 <ignore_js ...

  10. Cocos2d:使用 CCCamera 做滚动效果 (Four Ways of Scrolling with Cocos2D)

    原版的:http://www.koboldtouch.com/display/IDCAR/Four+Ways+of+Scrolling+with+Cocos2D There are two class ...