先来个冷笑话:一晚下班回家,一民警迎面巡逻而来。突然对我大喊:站住! 民警: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. 设计模式 - 出厂模式(factory pattern) 详细说明

    出厂模式(factory pattern) 详细说明 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27081511 工厂方法模式 ...

  2. [LeetCode226]Invert Binary Tree

    题目: Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 反转二叉树,左右儿子值交换 代码: / ...

  3. Palindromes&nbsp;_easy&nbsp;version

    Time Limit: 1Sec  MemoryLimit: 64 MB Submit:165  Solved: 76 [Submit][Status][WebBoard] Description & ...

  4. proxool数据库连接池配置

    proxool.xml构造 <?xml version="1.0" encoding="UTF-8"?> <something-else-en ...

  5. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

  6. SQLServer 扫盲

    原文:SQLServer 扫盲 谨以本文记录本人成长历程,并分享给各位SQL Server数据库管理系统使用者.本系列包含个人认为一个DBA应该具有的各项素质,系列文章将以下面列表展示,将持续更新,敬 ...

  7. Windows Server 2012启用Windows功能NetFx3时出错解决方法

    作者:冰点阳光 | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址:http://baohua.me/operating-system/windows-server-2012- ...

  8. DOM简要

    在看Js视频的时候就感觉Dom这东西太奇妙了.在这个注重用户体验的Web设计时代里.Dom是至关重要的. 它的易用性强.而且遍历简单.支持XPath. 它既然这么强大那么就来简单的介绍Dom这个东东. ...

  9. cocos2d-x使用CCClippingNode实现跑马灯

    直接在代码,这是一个很好的包layer,可以直接调用  //原来白白 bool TestLayer::init() { CCSize size = CCDirector::sharedDirector ...

  10. PAAS平台7&#215;24小时可用性应用设计

    如今非常多企业都在搭建自己的私有PAAS平台,当然也有非常多大型互联网公司搭建共同拥有PAAS平台(比如SAE/BAE/JAE(jae.jd.com)).那么使用PAAS平台来部署SAAS应用有哪些优 ...