今天才知道css hack是什麼

標籤：style   blog   class   c   code   java   

先來個冷笑話：一晚下班回家，一民警迎面巡邏而來。突然對我大喊：站住！ 民警：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等
最後      -music 

　　白天總是很忙
　　晚上總很慌
　　都說前面有光
　　誰能給誰方向
　　看起來他和她似乎都很風光
　　低頭承認渺小不如堅強上場

　　每天問問自己
　　是否盡全力
　　不學百般心機
　　過程是獎勵
　　你一直站在光能照到的地方
　　只要相信自己其實每個人都一樣

　　多一個人和你分享
　　少一點難自己肩扛
　　我們都是笨小孩但不忘挺起胸膛
　　多一個人和你分享
　　少一點難自己肩扛
　　相信自己遲早會發光發亮

　　每天問問自己
　　是否盡全力
　　不學百般心機
　　過程是獎勵
　　你一直站在光能照到的地方
　　只要相信自己其實每個人都一樣