对IE的hack,css精灵,还有css的一些简写.docVIP

IE的if条件Hack IE的if条件Hack可以让IE区别于其它浏览器和IE个版本之间的浏览器，它利用!--[if IE]...![endif]--这样的语法让IE浏览器对齐进行解析，属于IE浏览器专有。 !--[if IE] Only IE ![endif]-- 所有的IE可识别 !--[if IE 5.0] Only IE 5.0 ![endif]-- 只有IE5.0可以识别 !--[if gt IE 5.0] Only IE 5.0+ ![endif]-- IE5.0包换IE5.5都可以识别 !--[if lt IE 6] Only IE 6- ![endif]-- 仅IE6可识别 !--[if gte IE 6] Only IE 6/+ ![endif]-- IE6以及IE6以下的IE5.x都可识别 !--[if lte IE 7] Only IE 7/- ![endif]-- 仅IE7可识别 !--[if IE]...![endif]--之间内容的具体用法： !--[if IE 7] link rel=stylesheet href=../css/ie7.css type=text/css media=screen /![endif]-- 可以像这样链接一个CSS文件 !--[if IE] style .clearfix {display: inline-block;} /style ![endif]-- 也可以像这样直接输入一行CSS代码 针对不同版本的IE CSS Hack 由于都是IE浏览器，所以可能有几个版本对某种方法都可以解析，所以在这时只能用CSS的书写顺序和独有特性来区分它们，比如针对IE8的定义方法。 IE8还没有独有的定义方法，所以只能用它支持的方法和其它浏览器的独有方法在加上CSS书写顺序达到对它Hack的目的，如： .font { color:black; /*所有浏览器都会显示为黑色*/ color:?red\9;?/*IE6、IE7、IE8会显示红色*/ *color:?blue;??/*IE6、IE7会变为蓝色*/ _color:?green;??/*IE6会变为绿色*/ } 利用以上的方法可以使IE6、IE7、IE8三种浏览器和其它IE浏览器所显示的字体颜色都不相同，IE6为绿色，IE7为蓝色，IE8为红色，其余为黑色，这就是书写顺序加独有特性起到的作用。 Css调试技巧：当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色， 这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。 下面是一张样图： 本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。 不要等到你完成切片之后才开始sprite. 如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。 把图片放到它要显示的地方的相对的地方 这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧： 将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。 定位时避免使用bottom或right等 当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。 给每个图片足够的空间 就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。 例子： 例子中的每个条目都有个带数字的图片作为背景图