先来个冷笑话:一晚下班回家,一民警迎面巡逻而来。突然对我大喊:站住! 民警: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. ServiceStack.Hello——跨平台.net REST api服务搭建

    ServiceStack.Hello--跨平台.net REST api服务搭建 自己创建: https://github.com/ServiceStack/ServiceStack/wiki/Cre ...

  2. UVA 538 - Balancing Bank Accounts(贪心)

    UVA 538 - Balancing Bank Accounts 题目链接 题意:给定一些人的欠钱关系,要求在n-1次内还清钱,问方案 思路:贪心,处理出每一个人最后钱的状态,然后直接每一个人都和最 ...

  3. Extjs Web Desktop申请书

    今天我Web Desktop应用基本完成.多语言支持.现有asp,php,jsp版本号. 废话拍了几张照片让大家有一个直观的了解: watermark/2/text/aHR0cDovL2Jsb2cuY ...

  4. mysql 删除重复数据sql声明

    CREATE TABLE tmp AS SELECT id FROM get_review_url WHERE (no,title,name,content) IN (SELECT no,title, ...

  5. 2015最新iherb海淘攻略-图文入门教程

    IHerb是美国最热门的海淘海购网站之中的一个,适合不爱担心,怕麻烦的朋友入门海淘,由于它有中文页面,可直邮中国,上千个母婴用品.化妆品.保健品品牌,最重要的是!首次下单,价值$40及以上的订单会马上 ...

  6. 字符串查找KMP算法(转)

    如果你用过ctrl+F这个快捷键,那么你有很大的概率使用过这个算法,这就是在待查找字符串(可能有成千上万个字符)中找出模式串(比较小,可能有几个字符),可能找到大于或者等于1次的位置.例如,在abab ...

  7. NET 中的多线程

    NET 中的多线程 为什么使用多线程 使用户界面能够随时相应用户输入 当某个应用程序在进行大量运算时候,为了保证应用程序能够随时相应客户的输入,这个时候我们往往需要让大量运算和相应用户输入这两个行为在 ...

  8. SQL Server 优化存储过程的七种方法

    原文:SQL Server 优化存储过程的七种方法 优化存储过程有很多种方法,下面介绍最常用的7种. 1.使用SET NOCOUNT ON选项 我们使用SELECT语句时,除了返回对应的结果集外,还会 ...

  9. java安全性语言

    java通过所谓的沙箱安全模型保证了其安全性,以下我们就来看看java提供的安全沙箱机制. 组成沙箱的基本组件例如以下: 1.类装载器结构: 2.class文件检验器: 3.内置于java虚拟机(及语 ...

  10. Oracle存储过程的简单示例

    ---创建一个表 create table TESTTABLE (   id1  VARCHAR2(12),   name VARCHAR2(32) ) select t.id1,t.name fro ...