Ringo ܤ 遇見你的微笑

設計, 生活, 繪畫, 手作

 › 筆記 › 【設計】CSS Hack 不同瀏覽器樣式設定

【設計】CSS Hack 不同瀏覽器樣式設定

Ringo 2008-02-11    

這樣子的需求,一切都是由於不同瀏覽器慢慢開始掘起。

你希望大家進入你的網頁看到的網站樣子都是一樣的嗎?當然。

當 W3C 標準開始之後,瀏覽器的考慮是每個設計者都很頭痛的事。

而 CSS 其實不只你所知道的這樣而已。它其實是可以實現在各個瀏覽器下都看到你認為最完美的情況下。

只要你是個勤勞的CSS寫作者。都需在意這項重要的分別設定工作。

 
 
當有個區塊標籤為 <div id=ABC>你要的區塊內容</div>

現在我希望IE的字型為12px 而在 Firefox 的字型為 18px。
這時沒辦法直接用一句css就分開設定,就可以用瀏覽器專用的樣式標籤來定義。

我常用的寫法為

#ABC {font:12px;}
/* 這句為定義IE6的CSS */

html>body #ABC {font:18px;}
/* 這句為定義Firefox 的CSS */   
  

*+html>body #ABC {font:12px;}
/* 這句為定義IE7 的CSS */
    

若你只有定義前二列的話,IE7將會跟著Firefox 一起變成font:18px;

而若只有第一列,就是一般的情況,會變成三種瀏覽器都是font:12px;

以下還有一些方式可以分開定

Firefox瀏覽器專用

html>body #ID{   }
#ID:after{ } 

IE7瀏覽器專用
*:first-child+html #ID { } 

最新的瀏覽器版本(除IE7以外)
html>/**/body #ID { } 

Opera 瀏覽器專用 
html:first-child #ID { }

 Previous Post

【生活】背負

― 2008-01-22

Next Post 

【生活】久違的文章

― 2008-03-03

Related Articles

教學 | 使用Photoshop轉成多頁PDF
筆記 | 讓瀏覽器的文字實現陰影效果
受保護的內容: 筆記 | 利用BODY CLASS 區分IE瀏覽器

Leave a Reply Cancel reply

New post

  • 受保護的內容: JQuery 課程 – 第八天
  • 受保護的內容: JQuery 課程 – 第七天
  • 受保護的內容: JQuery 課程 – 第六天
  • 受保護的內容: JQuery 課程 – 第四天
  • 受保護的內容: JQuery 課程 – 第三天
  • 受保護的內容: JQuery 課程 – 第二天
  • 受保護的內容: JQuery 課程 – 第一天
  • 受保護的內容: CSS3 課程 – 第四天
  • 受保護的內容: 測試區
  • 開箱 | Hello Studio x Reiko 2016 年曆
  • 生活 | 小.黑咖啡 & 小器-岡理惠子展
  • 開箱 | fleurir lab :: 棉朵
  • 開箱 | Mia 2016月曆 綠透了禮盒
  • 開箱 | Mia 2015月曆 綠透了
  • 手作 | 2014 來交換耶誕卡片吧:)
  • 開箱 | Fion 2015月曆及紙膠帶開箱
  • 攝影 | 台北記憶 Film Contax G2 + G35
  • 攝影 | 清境行 Film Contax G2 + G35
  • 開箱 | 夏米2015月曆首刷特編版
  • 攝影 | 通霄神社 Film Contax G2 + G35

Select

  • Uncategorized (9)
  • 手作樂趣 (6)
  • 攝影 (5)
  • 生活紀錄 (1)
  • 留聲機 (42)
  • 筆記 (16)
  • 繪圖 視覺 (4)
  • 購物開箱文 (12)
  • 電影 文學 (15)

Re

  • 「俊仔」於〈生活 | 自己的網頁作品集〉發佈留言
  • 「Joshua」於〈開箱 | Mia 2015月曆 綠透了〉發佈留言
  • 「穎兒」於〈生活 | 自己的網頁作品集〉發佈留言
  • 「陳震」於〈敗家 | 我的夢幻逸品Contax G2〉發佈留言
  • 「dl」於〈敗家 | 我的夢幻逸品Contax G2〉發佈留言

Tag

Contax G2 CSS Digital Film FLASH JAVA PHP SQL 出遊 刻印章 婚禮紀錄 手作 攝影 教學 文具 活動 生活 紙膠帶 設計 開箱文

Count per Day

  • 414760Total visitors:
  • 3Visitors today:
  • 22Visitors yesterday:
Copyright © Ringo