CSS, CSS2, 網頁設計

CSS教學-個別定義Google Chrome的CSS樣式

梅干 2009/10/26
梅問題-CSS教學-個別定義Google Chrome的CSS樣式
  現在瀏覽器已可說是三分天下,主流還是以IEFirefox為主,但Google Chrome也是不容覷 ,雖然說目前使用率不及前二者,卻有逐漸在成長的趨勢,而梅干也被它的清爽界面,以及瀏覽速度,深深給的吸引住了,但這也真的是苦了網頁設計師,身為視覺設計的一員,為了不讓自已所設計出來的頁面跑位,即時要針對各家瀏覽器一一來作設定,雖然有些麻煩,但為了專業的堅持, 所以今天要各位來介紹一下,如何針對Google Chrome瀏覽器來個別設定。

css-chromehack.html
<style>
.outbox{
	width:500px;
	text-align:center;
	line-height:50px;
	color:#FFFFFF;
	background:#1490f0;
}
body:nth-of-type(1) .outbox{ /* safari 3+, chrome 1+, opera9+ */
	background:#ef1d5d;
}
</style>

<div class="outbox">
Google Chrome會看到紅色色塊<br />
其它瀏覽器為藍色</div>

只要對要個別設定的類別名稱,前面加上body:nth-of-type(1)後,再跟類別名稱,就可針對瀏覽器的差異來作設定。

在範例中可看到,當使用Google Chrome的話,則會看到紅色的色塊,若使用其它的瀏覽器則會看到藍色的色塊。
[範例預覽]