HTMl和css的hack技术常识

来源：互联网发布：手游试玩赚钱软件编辑：程序博客网时间：2024/05/17 04:57

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

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

什么是css hack

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

　　1.条件hack

1 <!--[if <keywords>? IE <version>?]>2     HTML代码块3 <![endif]-->

<keywords>取值有
　　空
　　lt   小于
　　gt　 大于
　　gte  大于或等于
　　lte  小于或等于
　　！   非
<version>取值有
可以是6/7/8/9...
例如 以下表示浏览器是小于ie7的：

1 <!--[if lt IE 7]>2 <style>3     .test2{width:100px;height:100px;background:blue}4 </style>5 <![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等

阅读全文

0 0