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更加安全些。
Sprites的技巧:
Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。
下面是一张样图：
本文的目的并不是讲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图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。
例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。
不用担心Sprite图片的像素大小
如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。
Css简写：
padding: margin:外还有：
颜色
颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。
#000000 可以写成 #000, #336699 可以写成 #369
这种简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:
#010101,#223345, #FFF000
Borders(边框)
border:1px solid #000;
border-width:0 1px 1px 0;
先设置四个边的默认风格，然后声明具体的哪个边要显示。
文字
文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体, Arial, sans-serif;
其实可以优化成一行:
font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;
列表
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);
可以写成:
list-style:square insideurl(filename.gif);
display属性值:
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
display:inline：
两者还是有些不同，一般用float比较多。
用display:inline;li之间的空隙比较难以处理。
display:inline就是将元素显示为行内元素.
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>,<a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色
圆角：
1,针对支持CSS3的现代浏览器，采用CSS3的圆角方式
2,针对IE系列，采用额外的标签
3,不同的情景选用是否采用JS来生成额外的标签
IE6 双边距bug
发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。
解决方法：是给浮动元素加上display:inline;CSS属性；或者用padding-left代替margin-left。
原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而之后对象是相对第一个对象的，所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素 haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以divclass的所有样式可以用在这个display inline的元素上。
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
