在 IE & mozilla 看到的畫面差很多,不知如何改 css.
2006-04-27 00:15 - 2006-04-27 00:46 #2214
來自 hinablue
hinablue replied the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
因為我不知道樣版檔 CSS 的順序，所以我就假設底下是一個簡單的樣板 home.tpl
因為標籤會被吃掉，所以底下的＜＞都是全型，使用最後的範例時請自行取代掉囉！
其實是釐清整個觀念，樣板的設定如果有高於你的 CSS 設定，那還是會以樣板為主
換句話說，只要你的 CSS 設定優先權高於樣板，那瀏覽器就會以你的設定作為輸出
至於怎麼提高優先權，除了 in-line 之外，就是把你的 CSS 也做成樣板
用 include 的方式放在需要的樣板中，任何 CSS 設定的最後面，這樣你的 CSS 設定優先權就是最高
當然，會比 in-line (同軸)低就是了
還有，如果是同一個 style 標籤內重複設定，則以後者為優先
再者.... -moz-opacity ← 這是啥？好像不支援吧
我太久沒玩了不知道說
你可以將底下的 code 做成 html 檔案，可以比較其 Class selector, Textual selector, in-line 的差異：
問題：為什麼最後的 a:hover 會在所有的 a 標籤都起作用呢？答案我剛剛說過囉
因為標籤會被吃掉，所以底下的＜＞都是全型，使用最後的範例時請自行取代掉囉！
{include file="./tpl/header.tpl"}
＜!-- 這種 CSS 叫做 LINK 的樣式表 --＞
＜link href="./css/header_top.css" rel="styleheet" type="text/css"＞
＜!-- 這種 CSS 叫做 STYLE 標籤 的樣式表 --＞
＜style＞
.transMenu .items {
position:relative;
left:0px; top:0px;
z-index:2;
text-indent:5px;
}
a.mainlevel-trans:hover {
color:#ffff00;
}
a.mainlevel_active-trans, a.mainlevel_active-trans:visited {
font-family: Tahoma, Helvetica, sans-serif;
text-decoration:none;
font-size: 13px;
font-weight:bold;
color:#ffff00;
}
div a {
font-size: 12pt;
}
＜/style＞
＜div class="transMenu" style="position: absolute; left: 10px; right: 20px; text-indent: 12px; border: 1px solid #FF0000;"＞
這裡的 style="position: absolute; left: 10px; right: 20px; text-indent: 12px; border: 1px solid #FF0000;" 稱為同軸 的樣式
＜a href="#"＞這裡是 Textual Selector＜/a＞
＜/div＞
假設 header.tpl 裡面是這樣
＜link href="./css/header.css" rel="styleheet" type="text/css"＞
＜style＞
.transMenu .items {
position:relative;
left:0px; top:0px;
z-index:2;
text-indent:35px;
}
a.mainlevel-trans:hover {
color:#ffffff;
}
那麼 CSS 的作用優先權就是這樣：
DIV 標籤的同軸(style)樣式 ＞ DIV 標籤的 Class Selector
home.tpl 的 STYLE ＞ LINK(header_top.css) ＞ header.tpl 的 LINK(header.css) and header.tpl 的 STYLE ＞ LINK(header.css)
最後最大的是 Textual Selector，他比同軸設定更大，但是如果 ＜a＞ 標籤也有 同軸/Class 設定，在條件相同下，就會位居第二
何謂 Textual Selector，div a {...} 就是一種
依照標籤順序，符合此依順序的標籤就會套用此種 CSS 方法
也就是用 div 把 a 包起來的寫法，就會自用套用 div a {...} 內的樣式
所以 div a {...} != a div {...} 喔！
這就是 Textual Selector，同樣的，可以多組設定 div a, div p font, div table {...}其實是釐清整個觀念，樣板的設定如果有高於你的 CSS 設定，那還是會以樣板為主
換句話說，只要你的 CSS 設定優先權高於樣板，那瀏覽器就會以你的設定作為輸出
至於怎麼提高優先權，除了 in-line 之外，就是把你的 CSS 也做成樣板
用 include 的方式放在需要的樣板中，任何 CSS 設定的最後面，這樣你的 CSS 設定優先權就是最高
當然，會比 in-line (同軸)低就是了
還有，如果是同一個 style 標籤內重複設定，則以後者為優先
再者.... -moz-opacity ← 這是啥？好像不支援吧
我太久沒玩了不知道說你可以將底下的 code 做成 html 檔案，可以比較其 Class selector, Textual selector, in-line 的差異：
問題：為什麼最後的 a:hover 會在所有的 a 標籤都起作用呢？答案我剛剛說過囉
Please 登入 to join the conversation.