作者TonyQ (沉默是金。)
看板Web_Design
標題Re: [問題] CSS hack !important的用法
時間Mon Oct 18 23:12:03 2010
※ 引述《oj113068 (橘子汁)》之銘言：
: 大家好，又來問問題了Orz
: 我想要確認一下把CSS的屬性提高優先的「!important」的用法
: 因為想要利用他區別不同的瀏覽器
: 雖然查到他是「IE6不會讀取這一行，會直接往下一行讀取」
: 可是我發現如果我是這麼寫的
: .style{overflow:hidden!important;}
: IE6還是會執行overflow:hidden
: 但如果我用
: .style{overflow:hidden!important;
: overflow:none;}
: 他就會執行overflow:none;
: 可是這樣很奇怪
: 這樣並不是「IE6不會讀取這一行，會直接往下一行讀取」，
: 而是「FF等瀏覽器優先讀取overflow:hidden!important;」
: 請問他的用法和原理是什麼呢？我有點被搞迷糊了Orz
: 附註：雖然說overflow:hidden在IE6應該是不能被內部的浮動DIV展開，不過這次用了
: CSS REST以後似乎就可以了...
case 1
同一定義區塊下 先 一般後 important
http://jsfiddle.net/6RTxY/
ie6 important 勝 chrome important 勝
case 2
同一定義區塊下 先important 後一般
http://jsfiddle.net/6RTxY/1/
ie6 一般勝 chrome important 勝
所謂的不認識指的是這裡的行為不一致。
case 3
不同定義區塊下 先important 後一般
http://jsfiddle.net/6RTxY/3/
ie6 important 勝 chrome important 勝
case 4
http://jsfiddle.net/6RTxY/4/
不同定義區塊下 先 一般後 important
ie6 important 勝 chrome important 勝
try it by your self.
--
I am a person, and I am always thinking .
Thinking in love , Thinking in life ,
Thinking in why , Thinking in worth.
I can't believe any of what ,
I am just thinking then thinking ,
but worst of all , most of mine is thinking not actioning...
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.137.61.228
※ 編輯: TonyQ 來自: 114.137.61.228 (10/18 23:15)
→ TonyQ:呵呵～ 10/18 23:17
→ oj113068:我看懂了，謝謝你!不過實際可能要換台電腦才看的到XD" 10/18 23:18
→ oj113068:這個網站好耶XD 10/18 23:18
→ TonyQ:最下面那個example 在ie6會是黃色。:p 10/18 23:19
→ TonyQ:這個其實是蠻有名的迷思的 很多人碰到 case4 時會撞牆撞到死 10/18 23:20
推 oj113068:因為我查到幾乎所有的範例都說IE6不認識這個標記~||| 10/18 23:22
→ TonyQ:紅色。 10/18 23:22
→ TonyQ:沒撞過case4 或者懶得解釋這麼多的人通常都會直接這樣說。 10/18 23:22
→ TonyQ:你也可以用ie tester 加減測，雖然結果有時候不會完全一樣 10/18 23:24
推 oj113068:喔，因為這台不是我的電腦，沒有裝ie tester~XD 10/18 23:25
→ oj113068:再次謝謝你舉了這麼多例子!! 10/18 23:25
→ grence:完整推 10/19 20:18
→ gpmm:只要理解逐行作用，這兩個 example 就很好懂了 XD 10/19 23:56
推 ckw19:所以簡單來說Chorme只接受important 10/20 00:33
→ ckw19:而ie6分兩種狀況 相同區塊下接受後者 不同區塊下接受impor~~ 10/20 00:34
→ ckw19:T哥講的真清楚!!~ 10/20 00:35