MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2025-10-11, 21:49

檢視沒有回覆的主題 | 檢視最近討論的主題


MozTW » 討論區首頁 » 其它 » 其他中的其他

所有顯示的時間為 UTC + 8 小時





發表新文章 回覆主題  第 1 頁 (共 1 頁)
  [ 9 篇文章 ] 
  列印模式 上一個主題 | 下一個主題 
發表人 內容
mercichao
文章發表於 : 2006-10-28, 20:43 
離線
頭像

註冊時間: 2006-03-18, 21:46
文章: 394
來自: マカオ
有一個關於 CSS 的問題想請教大家的 :oops:
因為按鈕要顯示圖示, 所以我用了以下的 CSS:
代碼:
#compact-menu-button[fx="2"] {
  list-style-image: url("chrome://compact-ce/skin/menu-24-fx2.png");
  -moz-image-region: rect(0px 35px 24px 0px);
  padding: 0px 3px 0px 5px;
  border: 0 !important;
  -moz-appearance: none; }
#compact-menu-button:hover[fx="2"] { -moz-image-region: rect(0px 70px 24px 35px); }
#compact-menu-button[fx="2"][open="true"] { -moz-image-region: rect(0px 70px 24px 35px); }
#compact-menu-button:active[fx="2"] { -moz-image-region: rect(0px 105px 24px 70px); }
#compact-menu-button[fx="2"] .toolbarbutton-menu-dropmarker { display: none !important; }

但是, 當選單中含有 checkbox 等項目時, 會產生如下的效果:
圖檔
很明顯地, 按鈕的 child 也 "繼承" 了部份的 CSS 屬性
問題是, 應該怎麼阻止 child 得到 parent 的 CSS 屬性呢 :?:

_________________
圖檔 挑選‧儲存圖片　圖檔 History Submenus Ⅱ　圖檔 Personal Menu
圖檔 Page Title in URL Bar　圖檔 Double Click Top-Left to Close
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1) Gecko/20061010 Firefox/2.0
 個人資料  
引用回覆  
yuoo2k
 文章主題 :
文章發表於 : 2006-10-28, 22:50 
離線
頭像

註冊時間: 2005-08-25, 19:59
文章: 1210
來自: 幻境地帶
mercichao 寫:
但是, 當選單中含有 checkbox 等項目時, 會產生如下的效果:
圖檔
很明顯地, 按鈕的 child 也 "繼承" 了部份的 CSS 屬性
問題是, 應該怎麼阻止 child 得到 parent 的 CSS 屬性呢 :?:

css 理論上應該只會 match 到跟你所指定的 selector 相符的元素而已，應該不會繼承下去。
不然頁面設計不就頭大了，每次改了上層的碼，下層的要額外寫 Code 去取消繼承...
可以的話請提供能重現這個問題的 sample 檔以方便找原因。

另外就是一般照使用慣例來說，選單中不會這樣直接擺一個 checkbox 來表現一個選單勾取項目，
而是指定一個 menuitem 設定其 type 屬性為 "checkbox" 來表現。

_________________
Add Bookmark Here ² | Charset Switcher | Hide Menubar | MClickFocusTab | Personal Titlebar
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1) Gecko/20061013 BonEcho/2.0 (O2-GLT-SSE2-PGU)
 個人資料  
引用回覆  
mercichao
 文章主題 :
文章發表於 : 2006-10-29, 11:51 
離線
頭像

註冊時間: 2006-03-18, 21:46
文章: 394
來自: マカオ
yuoo2k 寫:
css 理論上應該只會 match 到跟你所指定的 selector 相符的元素而已，應該不會繼承下去。
不然頁面設計不就頭大了，每次改了上層的碼，下層的要額外寫 Code 去取消繼承...
可以的話請提供能重現這個問題的 sample 檔以方便找原因。

但實際上的效果是, 上述的 CSS 中, list-style-image 和 -moz-image-region 會繼承下去, 而 padding 就不會 :shock:

至於 sample 檔, 可以用這個簡單的套件
若果分別移除了 qprefbttnPopup.xul 和 qprefbtn.xul 中的這一句:
代碼:
style="list-style-image:none !important;"

那個按鈕的選單就會產生同樣的現象
圖檔
值得注意的是, 這個 style 不是放在 checkbox 中, 而是放了在身為 parent 的 menupopup 中 :shock:

( 要使用那個按鈕, 需要在那個套件的選項中把 "在選單....列上" 取消打勾才可以 )

這個問題應該只與 xul 或 css 有關, 因為 Compact Menu CE 也有這個問題
在選項介面中打 search-container, 按 "以 ID 加入", 儲存設定後再按按選單按鈕也能重現這現象


附加檔案:
sshot-1.png [6.32 KiB]
被下載 220 次

_________________
圖檔 挑選‧儲存圖片　圖檔 History Submenus Ⅱ　圖檔 Personal Menu
圖檔 Page Title in URL Bar　圖檔 Double Click Top-Left to Close
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1) Gecko/20061010 Firefox/2.0
 個人資料  
引用回覆  
yuoo2k
 文章主題 :
文章發表於 : 2006-10-29, 15:52 
離線
頭像

註冊時間: 2005-08-25, 19:59
文章: 1210
來自: 幻境地帶
我用 DOM 檢視器查到所有的 checkbox 中都有兩個 image 元素，結構是這樣:
checkbox
+ image
+ hbox
　+ image
　+ label

的第一個 image 有這樣的 node 屬性:
代碼:
xbl:inherits = checked,disabled

這個可以理解，就是 checkbox 會繼承上層元素的 checked 與 disabled 屬性
因此如果你把 checkbox 擺在 group 裡頭，只要對 group 設定 disabled = true
則其中的 checkbox 都會自動 disabled = true 。的確...這很合情合理也是很方便的設計。:lol:

不過第二個 image 有這樣的 node 屬性:
代碼:
xbl:inherits = src

也就是它繼承了其上層元素的 src 屬性...image 的 src 就是圖檔來源，
這樣一來只要上層的元素有設定 image (如: 工具列按鈕)，就造成 checkbox 裡會顯示其上層按鈕的圖。

我想以上描述的就是造成此問題原因。

一個最簡單而通用的解決辦法，是在你的套件對 browser.xul 的 CSS overlay 中加入下面這樣的碼:
代碼:
toolbarbutton>menupopup {
   list-style-image: none;
}

也就是令所有 toolbarbutton 下的 menupopup 選單的 image 來源是空的。
因此如果是像 Prefs 這樣的套件直接在 menupopup 下置入 checkbox 就會直接繼承到空的 src 來源。

我想這樣應該是比較合用的方式，因為就不必改到你強制從選單列移過來的選單元素內的任何屬性。

當然如果你覺得這樣的設定可能太過於泛用，或許有可能會造成別的套件真想這樣做時卻被此設定關掉...
那就手動一個一個替你套件中的每個工具列按鈕的 menupopup 加上如上的 CSS 規則。舉個例....
代碼:
#compact-extra-menu,
#compact-extra-Popup {
   list-style-image: none;
}

_________________
Add Bookmark Here ² | Charset Switcher | Hide Menubar | MClickFocusTab | Personal Titlebar
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1) Gecko/20061013 BonEcho/2.0 (O2-GLT-SSE2-PGU)
 個人資料  
引用回覆  
mercichao
 文章主題 :
文章發表於 : 2006-10-29, 18:52 
離線
頭像

註冊時間: 2006-03-18, 21:46
文章: 394
來自: マカオ
嗯, 現在算是 OK 了 :P
但最費解的, 是為甚麼有些會繼承了下去, 有些又不會.... =="

_________________
圖檔 挑選‧儲存圖片　圖檔 History Submenus Ⅱ　圖檔 Personal Menu
圖檔 Page Title in URL Bar　圖檔 Double Click Top-Left to Close
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1) Gecko/20061010 Firefox/2.0
 個人資料  
引用回覆  
不惑仔Boohover
 文章主題 :
文章發表於 : 2006-10-29, 20:50 
離線

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩
mercichao 寫:
嗯, 現在算是 OK 了 :P
但最費解的, 是為甚麼有些會繼承了下去, 有些又不會.... =="


lists的相關property在w3c spec本來就定義有繼承性。css property本來就是有的有繼承性，有的沒有。

_________________
時間，人為與自然的衝突。~不惑仔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
 個人資料  
引用回覆  
mercichao
 文章主題 :
文章發表於 : 2006-10-30, 12:52 
離線
頭像

註冊時間: 2006-03-18, 21:46
文章: 394
來自: マカオ
不惑仔Boohover 寫:
lists的相關property在w3c spec本來就定義有繼承性。css property本來就是有的有繼承性，有的沒有。

那應該有辦法阻止它繼承吧?

_________________
圖檔 挑選‧儲存圖片　圖檔 History Submenus Ⅱ　圖檔 Personal Menu
圖檔 Page Title in URL Bar　圖檔 Double Click Top-Left to Close
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1) Gecko/20061010 Firefox/2.0
 個人資料  
引用回覆  
BobChao
 文章主題 :
文章發表於 : 2006-10-30, 13:32 
離線
[網站管理員]
頭像

註冊時間: 2002-01-07, 19:28
文章: 3080
來自: 台灣
mercichao 寫:
不惑仔Boohover 寫:
lists的相關property在w3c spec本來就定義有繼承性。css property本來就是有的有繼承性，有的沒有。

那應該有辦法阻止它繼承吧?


除了覆蓋特性值之外應該不行吧我想

代碼:
a {
  css-a: url(bobchao.jpg); /* 假設這個會繼承 */
}

b {
  css-a: none; /* 就覆寫 */
}

<a>
  <b/>
</a>


或許也可以是

代碼:
a {
  css-a: url(bobchao.jpg); /* 假設這個會繼承 */
}

a .dont-touch-me { /* 狠一點或許就用 "a *" */
  css-a: none; /* 就覆寫 */
}

<a>
  <b class="dont-touch-me"/>
  <c class="dont-touch-me"/>
  <b class="dont-touch-me"/>
</a>

_________________
雜工 :: 柏強 / Bob Chao
發問討論請保持禮節，在志工社群裡沒有人有「義務」要為您做些什麼。

* MozTW 志工無限招募中，開放網路世界需要您的一臂之力
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0
 個人資料  
引用回覆  
mercichao
 文章主題 :
文章發表於 : 2006-10-30, 13:47 
離線
頭像

註冊時間: 2006-03-18, 21:46
文章: 394
來自: マカオ
BobChao 寫:
除了覆蓋特性值之外應該不行吧我想

剛剛上 google 找了一會兒, 只有說明哪些屬性會繼承, 哪些不會
但全都沒有提到怎麼停止這個機制

感覺上好像快餐店的套餐.....方便但沒有選擇的餘地..... ~ ~"

_________________
圖檔 挑選‧儲存圖片　圖檔 History Submenus Ⅱ　圖檔 Personal Menu
圖檔 Page Title in URL Bar　圖檔 Double Click Top-Left to Close
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1) Gecko/20061010 Firefox/2.0
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  第 1 頁 (共 1 頁)
  [ 9 篇文章 ] 

MozTW » 討論區首頁 » 其它 » 其他中的其他

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員 和 23 位訪客

您 不能 在這個版面發表主題
您 不能 在這個版面回覆主題
您 不能 在這個版面編輯您的文章
您 不能 在這個版面刪除您的文章
您 不能 在這個版面上傳附加檔案

搜尋:
前往 :  
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW，Mozilla 台灣社群