先来个冷笑话:一晚下班回家,一民警迎面巡逻而来。突然对我大喊:站住! 民警: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. JAVA 公众微信的开放源码项目管理合作伙伴招募的版本号

    大家好:       jeecg开源社区.现在正在进行"JAVA 开放源码的版本号项目微信公共账号"工作,有兴趣的朋友一起參与. 截止时间:20140510 採用技术: 1. JE ...

  2. HDN2048(交错复发)

    上帝.神与神 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  3. Linux删除以破折号开头的文件Windows在批处理文件来删除隐藏属性

    昨天去打印店打印的材料.结果中毒.所有的文件被隐藏.生成一个一堆快捷键.回来后.我很容易地把它放入Linux机,我想删除这些文件怪. 下面是该过程,遇到的问题. 1.您无法删除'-'该文件的开头 最初 ...

  4. 依据Uri获得sd卡图片

    <pre name="code" class="java">String mBigImage = URLEncoder.encode(mImageU ...

  5. directX--大约CSource和CSourceStream (谁在叫fillbuffer)

    CSourceStream类别,它是CSource类别OutputPin[source.h/source.cpp] 派生自CAMThread和CBaseOutputPinl         成员变量: ...

  6. ubuntu13.10 下一个 g++和gcc 4.8不兼容的问题不能被安装

    前gcc这是4.8.x.导致g++不能用.因此,要 网上找了很多办法,在安装过程中或这些以下问题的出现: 1. Unable to exec g++.real: 没有那个文件或文件夹 2. 下列软件包 ...

  7. git checkout 命令详解(转)

    在日常的git操作中,git checkout——检出,是我们的常用命令.最为常用的两种情形是创建分支和切换分支. 在下面的命令中,使用了一些简写,在这里说明一下: git st # git stat ...

  8. Android重力加速度传感器数据去噪

    public void onSensorChanged(SensorEvent event) { final float alpha = 0.8; gravity[0] = alpha * gravi ...

  9. 微信QQ的二维码登录原理浅析

    在非常多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用開始多起来,这里先说下啥是二维码,事实上二维码就是存了二进制数据的 ...

  10. SharePoint 2010 升级到2013时间 为了确保用户可以连接,但无法改变升级数据

    SharePoint 2010 升级到2013时间 为了确保用户可以连接,但无法改变升级数据 我总结的步骤 红色请注意它们的含义. 步骤1:连接到SQL DBS 上的SharePoint 2010数据 ...