認識CSS樣式clip: 認識隱藏頁面元素

在頁面上,我們經常會用到radio, 比如性別:男,女,保密.
但我們不喜歡預設的radio樣式!我們會用其他的來替代.
我最初的做法是, 用label顯示,設定radio為隱藏! (即display:none;)
當我點擊label的時候,同時觸發radio的click事件.
即: ($是jquery)
$(".label1").click(function(){
$(".radio1").click();
        // 其他代碼更改樣式,讓label顯示為(非)啟用狀態
});

Firefox和Chrome都比較正常, 但IE下杯具了!
進一步調試,發現,原來IE下不會觸發隱藏元素的事件,即有樣式"display:none;"的元素.
這個時候我想到jQuery也有實現這個功能的外掛程式!於是就去查那個外掛程式的源碼,啥也沒查到!
然後Firebug查css,終於, clip印入我的眼帘.
在此,引用w3school上的說明:http://www.w3school.com.cn/css/pr_pos_clip.asp

文法:object.style.clip="rect(0px,50px,50px,0px)"
預設值是auto
四個參數,和css其他樣式一樣,分別對應:上,右,下,左.
基於元素左上方定位!
即:(上下邊界離上邊的距離,左右邊界離左邊的距離)
上邊界距上邊0
右邊界距左邊50
下邊界距上邊50
左邊界距左邊0
可見這個是顯示元素左上方50×50的範圍

這個css樣式要配合絕對位置樣式才會起作用,即下面兩個經常一起出現:
object.style.position="absolute";
object.style.clip="rect(0px,50px,50px,0px)";

回到我們radio的問題,我們不能設定radio "display:none;"
而是設定
position : absolute;
clip        : rect(1px, 1px, 1, 1px);

這個時候,radio不再是隱藏的,而是可見的元素,不過通過裁剪(clip),我們實際上是看不見它的, 問題解決!