MozTW 討論區
https://forum.moztw.org/

關於 CSS 的一個技術性問題
https://forum.moztw.org/viewtopic.php?f=8&t=16078		 第 1 頁 (共 1 頁)
發表人:  mercichao [ 2006-10-28, 20:43 ]
文章主題 :  關於 CSS 的一個技術性問題
有一個關於 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 屬性呢 :?:
發表人:  yuoo2k [ 2006-10-28, 22:50 ]
文章主題 : 
mercichao 寫:
但是, 當選單中含有 checkbox 等項目時, 會產生如下的效果:
圖檔
很明顯地, 按鈕的 child 也 "繼承" 了部份的 CSS 屬性
問題是, 應該怎麼阻止 child 得到 parent 的 CSS 屬性呢 :?:

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

另外就是一般照使用慣例來說，選單中不會這樣直接擺一個 checkbox 來表現一個選單勾取項目，
而是指定一個 menuitem 設定其 type 屬性為 "checkbox" 來表現。
發表人:  mercichao [ 2006-10-29, 11:51 ]
文章主題 : 
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]
被下載 221 次
發表人:  yuoo2k [ 2006-10-29, 15:52 ]
文章主題 : 
我用 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;
}
發表人:  mercichao [ 2006-10-29, 18:52 ]
文章主題 : 
嗯, 現在算是 OK 了 :P
但最費解的, 是為甚麼有些會繼承了下去, 有些又不會.... =="
發表人:  不惑仔Boohover [ 2006-10-29, 20:50 ]
文章主題 : 
mercichao 寫:
嗯, 現在算是 OK 了 :P
但最費解的, 是為甚麼有些會繼承了下去, 有些又不會.... =="


lists的相關property在w3c spec本來就定義有繼承性。css property本來就是有的有繼承性，有的沒有。
發表人:  mercichao [ 2006-10-30, 12:52 ]
文章主題 : 
不惑仔Boohover 寫:
lists的相關property在w3c spec本來就定義有繼承性。css property本來就是有的有繼承性，有的沒有。

那應該有辦法阻止它繼承吧?
發表人:  BobChao [ 2006-10-30, 13:32 ]
文章主題 : 
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>
發表人:  mercichao [ 2006-10-30, 13:47 ]
文章主題 : 
BobChao 寫:
除了覆蓋特性值之外應該不行吧我想

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

感覺上好像快餐店的套餐.....方便但沒有選擇的餘地..... ~ ~"
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/