Demo

討論

保持飢餓,保持愚笨 (Stay hungry, stay foolish)。 史蒂夫·賈伯斯

公告

本網站已取消討論區的討論方式,如果您有問題請至LINE群行動條碼圖片網址,或Facebook社團

在 IE & mozilla 看到的畫面差很多,不知如何改 css.

  • asry
  • asry 的個人頭像 Topic Author
  • 訪客
  • 訪客
2006-04-25 10:26 #2193 來自 asry
asry created the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
各位大大您好,
我自製一個 template, 在 mozilla 測試完全沒問題, 但在 ie 測試時, 發現有套用到 jsmenu 的部份,
字會全部擠在一起... 而且很奇怪的是, 當狀態是link(未點選時有問題),但visited後,被我點的那欄位就會正常遵照下列css語法.
我不知道為何會這樣, 但我也去查了這段css的寫法..如下: 仍找不出問題出在那..
a.mainlevel-trans:link , a.mainlevel-trans:visited {

Please 登入 to join the conversation.

More
2006-04-25 10:32 #2195 來自 arnold
arnold replied the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
您要不要試試看...會不會是中文字的問題....如果都改成英文的時候還會不會有同樣狀況發生
jsmenu還沒玩過....所以只能提供一些...想到的測試方法囉....呵呵....祝你成功


●架設主機作業系統:Tinysoft 3.07 (Linux 2.4.24)
●PHP&Mysql版本:PHP 4.3.8 & MySQL 4.0.2.0
●休息中........ ^__^

Please 登入 to join the conversation.

  • asry
  • asry 的個人頭像 Topic Author
  • 訪客
  • 訪客
2006-04-25 10:39 #2196 來自 asry
asry replied the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
您好,
已確認過與中英文無關喔~
因為我的 jsmenu 也有英文選單.
但看似沒有差別..我想與 css 關係較大, 應跟編碼無關喔..
謝謝您.

Please 登入 to join the conversation.

  • hinablue
  • hinablue 的個人頭像
  • 訪客
  • 訪客
2006-04-25 20:34 - 2006-04-25 20:37 #2201 來自 hinablue
hinablue replied the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
你這一段 CSS 並沒有問題喔
會不會是 CSS 性質作用優先權出問題...

1. 樣式設定的主控權:
網頁設計者的樣式設定 > 使用者的樣式設定 > 瀏覽器本身的樣式設定

2. 樣式設定的作用權:
同軸樣式設定 > style 標籤內的區段樣式設定 > link 鏈結進來的樣式設定*

3. 挑選者(Selector)的優先權:
前後挑選者 > 類別挑選者 > ID 挑選者 > 一般標籤挑選者

* link 這個標籤很特別,如果它放在同軸設定的前面,那它的優先權最低;
倘若是緊接著同軸設定的話,那它的優先權就會躍升為第二

是否能將 jsmenu 的相關設定一起貼出來比較容易檢查喔
最後修改原因: 2006-04-25 20:37 來自 hinablue.

Please 登入 to join the conversation.

  • asry
  • asry 的個人頭像 Topic Author
  • 訪客
  • 訪客
2006-04-26 09:01 #2205 來自 asry
asry replied the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
您好,
請教什麼是同軸設定?
我有辦直接讓 ie 讀我的 css 設定, 而不管 ie 本身對樣板的解讀為何嗎?
可以麻煩您幫我看看是怎麼一回事嗎?

Please 登入 to join the conversation.

  • hinablue
  • hinablue 的個人頭像
  • 訪客
  • 訪客
2006-04-27 00:15 - 2006-04-27 00:46 #2214 來自 hinablue
hinablue replied the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
因為我不知道樣版檔 CSS 的順序,所以我就假設底下是一個簡單的樣板 home.tpl
因為標籤會被吃掉,所以底下的<>都是全型,使用最後的範例時請自行取代掉囉!
{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 ← 這是啥?好像不支援吧 :P 我太久沒玩了不知道說

你可以將底下的 code 做成 html 檔案,可以比較其 Class selector, Textual selector, in-line 的差異:
問題:為什麼最後的 a:hover 會在所有的 a 標籤都起作用呢?答案我剛剛說過囉
最後修改原因: 2006-04-27 00:46 來自 hinablue.

Please 登入 to join the conversation.

  • asry
  • asry 的個人頭像 Topic Author
  • 訪客
  • 訪客
2006-04-27 10:26 #2219 來自 asry
asry replied the topic: 在 IE & mozilla 看到的畫面差很多,不知如何改 css.
您好,
感謝您細心指導.
我已經找出解決方法了~ jsmenu 已可正常顯示.
謝謝您~~

Please 登入 to join the conversation.