|
by zhangxinxu from http://www. 一,、一開始的嘮叨 對于checkbox,，從我開始接觸HTML開始，陸陸續(xù)續(xù)也研究過好多次,，然而多是零星的知識點(diǎn)的累加，或是掌握了些表象的東西,，是否深入核心，是否深入其本質(zhì),，是否有了完善的總結(jié)，是否融入自己的世界觀,，都沒有,，而我今天要做的工作就是把過去的那些積累好好的精心的整理出來，加上自己的思考,，加上自己的理解,，展示出來,。 提前的說明：本文checkbox的講解不針對Safari瀏覽器，或僅是一帶而過,，Safari瀏覽器自成一家,，就像是潘多拉星球的納美人一樣，長得忒不一樣,，差異過大，沒有多少可比性,。 二,、同樣的對齊方式,，細(xì)微的表現(xiàn)差異 這里的基線是文字排版的用詞,，針對英文字母，指英文字母平時(shí)“坐”的位置,，就是a,b,c等字母的底線。如下圖的紅線就是基線： 對于中文而言,，在瀏覽器上,，雖然沒有直觀的底線,，基線，中線等概念的劃分,，但是大多數(shù)情況下（IE6、IE7理解底線等有誤,，IE8已糾正）,，基線之類的概念瀏覽器是認(rèn)的,，例如,，某12像素的漢字，瀏覽器會(huì)把距離漢字底部（不妨假定為1像素的地方）當(dāng)作基線,。 但正如剛剛提到的，IE6,，IE7理解基線,，底線有誤,，所以造成了默認(rèn)情況下，復(fù)選項(xiàng)（單選框亦如此）后面緊隨文字時(shí)會(huì)有瀏覽器的差異,。這種差異僅僅是像素級別的,，如果我們總是抱著浮躁的心緒,，這種顯示的差異是不會(huì)覺察的，也就不會(huì)發(fā)現(xiàn)造成這種 仔細(xì)對比IE6和Firefox不同文字大小下文字底邊距離參考線的相對位置，可以發(fā)現(xiàn)IE6下文字總是偏上1像素,，而IE8下與Firefox,，chrome瀏覽器一致了,。這表明IE6在理解某些屬性時(shí)除了問題,。我自己有兩種解釋：一是IE6能夠準(zhǔn)確的判別文字的基線(baseline),，但是理解自身處理點(diǎn)問題,，并沒有把自己的1像素邊框算進(jìn)去；二是IE6就是對文字的基線理解出錯(cuò)了,，可能把基線當(dāng)成底線來用了，而把底線不知當(dāng)什么來用了（設(shè)置復(fù)選框vertical-align為bottom,，后面的文字在IE6-7下會(huì)跑到上面去——我是不解的?。?。顯然，我更傾向與后一種解釋,，并且前一種說法的可靠性也會(huì)在下面的驗(yàn)證中大打折扣。 三,、為什么復(fù)選框與后面的文字之間會(huì)有間距,？ 首先聲明兩點(diǎn)：首先肯定不是空格,，checkbox與文字無換行且無空格；其次這不是理所當(dāng)然的,，這是有原因的。您可以先自己想一想,，現(xiàn)在凌晨5點(diǎn)了,，我先去啃個(gè)面包填下肚子,，別走開,，馬上回來。 好,，有人可能會(huì)說復(fù)選框默認(rèn)有個(gè)margin,，恭喜你,，對了一半,。實(shí)際上是這樣的,，在Firefox，chrome,，Safari等現(xiàn)代瀏覽器下復(fù)選框與文字的間隔確實(shí)是由margin引起的，也就是默認(rèn)情況下,，checkbox有個(gè)margin值，其中margin-right為3像素,。但是IE瀏覽器下(IE6-8)卻不是由于margin引起的,。而是其本身,。 雖然說，我們?nèi)庋劭瓷先?，IE和Firefox下的復(fù)選框長得一模一樣（確實(shí)一樣,，邊框色，大小都一致）,，然而實(shí)際上，這兩者卻有著很驚人的差異,。Firefox或chrome瀏覽器下,，復(fù)選框那就是純正的復(fù)選框,，不含三聚氰胺,，非基因食品,，非克隆,，如假包換的復(fù)選框,。就是我們?nèi)庋垡姷降哪莻€(gè)方方的框框,。但是IE瀏覽器下,，復(fù)選框只是個(gè)包裝的產(chǎn)品，帥師傅的方便面貼了個(gè)康師傅的牌子而已,。要看清IE復(fù)選框的本質(zhì),，很簡單： 方法有二： 我們對比Firefox（放大600%）： 順便附上IE8的點(diǎn)擊虛框（放大600%）： 對比IE6和Firefox瀏覽器的圖可以明顯看到虛框的差異,，F(xiàn)irefox瀏覽器的虛框直接依附在復(fù)選框本身的邊框上，但是IE6卻是偌大的個(gè)區(qū)域,，而復(fù)選框只是位居其中；IE8下的表現(xiàn)說明虛框的范圍更加對稱了。 方法二： 好了,，足夠了,，從上面的對比可以得到下面的結(jié)論：IE瀏覽器下我們默認(rèn)狀態(tài)下看到的復(fù)選框只是真實(shí)復(fù)選框的一部分，只是一個(gè)殼子,，外表而已。實(shí)際上,，IE瀏覽器下，復(fù)選框指的是上圖邊框及背景色充斥的整個(gè)部分,。這也就是IE下為什么復(fù)選框與文字之間“有間距”（實(shí)際上是沒有的）的原因,，有別于Firefox的margin間距。 正是由于這種復(fù)選框本身的差異,，造成了IE瀏覽器及其他瀏覽器復(fù)選框?qū)SS的反應(yīng)不同,。IE瀏覽器下checkbox對width,border,background敏感,，而對margin:0一點(diǎn)反應(yīng)也沒有,；Firefox，chrome等瀏覽器對border,background一點(diǎn)反應(yīng)都沒有,，F(xiàn)irefox對width一點(diǎn)反應(yīng)也沒有,，但是Firefox等對margin反應(yīng)強(qiáng)烈，margin:0;會(huì)使復(fù)選框后面的文字緊貼這復(fù)選框,。 正是由于Firefox下復(fù)選框與文字的間距是默認(rèn)的margin產(chǎn)生的（chrome瀏覽器下復(fù)選框默認(rèn)margin值為margin:3px 3px 3px 4px;Firefox與之一致）,，而IE復(fù)選框本身就是包含間隔,，所以當(dāng)你妄圖通過margin值調(diào)整復(fù)選框與文字的水平距離時(shí)會(huì)發(fā)現(xiàn)IE總比Firefox等瀏覽器多3像素,。所以當(dāng)您妄圖通過調(diào)節(jié)margin值來使復(fù)選框與文字垂直對齊時(shí),，老是得不到滿意的效果,。 三、復(fù)選框與文字對齊的問題 不過,，這里我還想補(bǔ)充一丁點(diǎn)東西，或者說是另外一個(gè)讓復(fù)選框與文字對齊的新方法,。設(shè)置字體讓復(fù)選框與文字對齊。關(guān)于字體對文字對齊,，排版，文字下劃線等的影響又是一個(gè)很大的課題,，這里不展開,，僅展示結(jié)論。 完整代碼如下： <style type="text/css">
body{font-size:12px; font-family:Tahoma;}
.checkbox{vertical-align:middle; margin-top:0;}
</style>
<body>
<input class="checkbox" type="checkbox" />復(fù)選框
</body>結(jié)果為： 四,、如何判斷復(fù)選框是否被選中 現(xiàn)在又有問題，如何判定一組復(fù)選框是否有被選中的呢,？ 例如,，見下面的HTML代碼： <input type="checkbox" name="test" />圣誕節(jié) <input type="checkbox" name="test" />股市 <input type="checkbox" name="test" />阿凡達(dá) <input type="checkbox" name="test" />十月圍城 <input type="checkbox" name="test" />水價(jià)上調(diào) <input type="button" value="檢測" id="btn" /> 則相應(yīng)的JavaScript代碼為： var btn = document.getElementById("btn");
var test = document.getElementsByName("test");
btn.onclick = function(){
for(var i=1; i<=test.length; i+=1){
if(test[i-1].checked){
alert("當(dāng)前有選中,！");
return;
}
}
alert("一個(gè)也沒有選！");
};
您可以狠狠地點(diǎn)擊這里：檢測復(fù)選框組是否被選中demo頁面 五,、復(fù)選框的全選與反選 <input type="checkbox" name="test" />圣誕節(jié) <input type="checkbox" name="test" />股市 <input type="checkbox" name="test" />阿凡達(dá) <input type="checkbox" name="test" />十月圍城 <input type="checkbox" name="test" />水價(jià)上調(diào) <input type="button" value="全選/反選" id="btn" /> 相應(yīng)的JavaScript代碼就是： var btn = document.getElementById("btn");
var test = document.getElementsByName("test");
btn.onclick = function(){
for(var i=1; i<=test.length; i+=1){
if(test[i-1].checked){
test[i-1].checked = false;
}else{
test[i-1].checked = true;
}
}
};您可以狠狠地點(diǎn)擊這里：復(fù)選框全選/反選demo實(shí)例頁面 原本想演示一下如何用jQuery實(shí)現(xiàn)全選與反選,，順便寫個(gè)全選反選選擇限制的簡單插件的,，不過現(xiàn)在看來沒有必要了，一是我熬了一夜有些累了,，不想動(dòng)了,；二是本身復(fù)選框操作就比較簡單,，寫個(gè)插件,，反而多余。 六,、最后的些話 原創(chuàng)文章,，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.] （本篇完） 如果您覺得本文的內(nèi)容對您的學(xué)習(xí)有所幫助： 相關(guān)文章
標(biāo)簽： checkbox, chrome, Firefox, IE6, IE8, javascript, 兼容性, 復(fù)選框, 對齊, 瀏覽器
|
|
|
