- 最後登錄
-
- 註冊時間
-
- 閱讀權限
- 200
- 帖子
- 10
- 精華
- 0
- 積分
- 149
|
知道CSS的朋友一定聽說過CSS hack，現在的浏覽器IE、Firefox、Chrome、Opera、Safari。。。百家爭鳴，可苦了Web前端開發人員了。
不同的浏覽器對CSS的解釋都有一點出入，特別是padding, line-height這些要細微控制的地方，下面的hack基本可以解決這個問題：
• 在屬性前加下劃線(_)，那麽此屬性只會被IE6解釋
• 在屬性前加星號(*)，此屬性只會被IE7解釋
• 在屬性值後面加"\9"，表示此屬性只會被IE8解釋
各浏覽器CSS hack兼容表：
| | IE6 | IE7 | IE8 | Firefox | Chrome | Safari | !important |
| Y |
| Y |
|
| _ | Y |
|
|
|
|
| | * | Y | Y |
|
|
|
| *+ |
| Y |
|
|
|
| \9 | Y | Y | Y |
|
|
| | \0 |
|
| Y |
|
|
| | nth-of-type(1) |
|
|
|
| Y | Y |
- #test{
- color:red; /* 所有浏覽器都支持 */
- color:red !important;/* Firefox、IE7支持 */
- _color:red; /* IE6支持 */
- *color:red; /* IE6、IE7支持 */
- *+color:red; /* IE7支持 */
- color:red\9; /* IE6、IE7、IE8支持 */
- color:red\0; /* IE8支持 */
- }
- body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
|
|
