在VS2005中，LinkButton控件最終解釋為a標(biāo)簽。我們可以通過(guò)各種方法來(lái)對(duì)其添加樣式，主要的方法是為L(zhǎng)inkButton控件設(shè)置一個(gè)背景圖片（background-image）。但這種方法有一個(gè)缺點(diǎn)， 就是同樣的樣式，如果按鈕的字?jǐn)?shù)不同，就需要很多張背景圖片。例如：

上述情況就需要四張不同的背景圖片。但在實(shí)際的應(yīng)用中，會(huì)需要相當(dāng)多的背景圖片，特別是做OA，CRM等系統(tǒng)應(yīng)用的時(shí)候，需要的背景圖片就更多了！于是，為了減輕工作量，提高工作效率，我們可以采用這種方式來(lái)實(shí)現(xiàn)：在LinkButton控件外再套上一個(gè)span標(biāo)簽，并給這個(gè)span標(biāo)簽添加一個(gè)css類(lèi)，用以綁定樣式！

<span class="wrapBtn"><asp:LinkButton ID="LnkBtnConfirm" runat="server" Text="確定"></asp:LinkButton></span>

在瀏覽器中得到的html就是：<span class="wrapBtn"><a>確定</a></span>（已經(jīng)去掉了與樣式無(wú)關(guān)的代碼）。然后在相應(yīng)的css文件中寫(xiě)如一下代碼：

 

.wrapBtn {
                display: -moz-inline-box;
                display: inline-block;
                background: transparent url(1.gif) 0 0 no-repeat; //1.gif 為背景圖片的路徑
                height: 42px; //背景圖片的高度
                padding: 0 0 0 20px;
            }
            .wrapBtn a {
                display: -moz-inline-box;
                display: inline-block;
                height: 42px;
                background: transparent url(1.gif) right 0 no-repeat;
                padding: 12px 20px 0 0;
                text-decoration: none;
                color: #FFFFFF;
                font-weight: bolder;
            }
            .wrapBtn a:hover {
                text-decoration: underline;
                color: #FF9900;
            }

其中，display: -moz-inline-box; 是兼容firefox的css hack，它的位置不能與display: inline-block;顛倒！你也可以采用ie條件注釋?zhuān)–onditional Comments）的方法，將這段代碼分離開(kāi)，以增強(qiáng)代碼的可維護(hù)性和可讀性。1.gif為背景圖片，可以把它做得很寬，以適應(yīng)以后的需求變化。這種方法只需要一張背景圖片就可以滿(mǎn)足同一樣式所有按鈕的要求，一個(gè)字“爽”！

這樣做還有一個(gè)好處就是當(dāng)你要對(duì)系統(tǒng)進(jìn)行換膚的時(shí)候，可以極大的較少工作量?。ㄒ郧案牧撕脦讉€(gè)OA的UI，單單這樣的按鈕一次就要改近200個(gè)，人都要哭了！還有每個(gè)重命名，對(duì)號(hào)入座！還有一次做個(gè)網(wǎng)站，要求有換膚的功能，又是一個(gè)痛苦洗禮！早點(diǎn)用這種方法就輕松多了！）

這種方法也有不足的地方：首先就是需要多添加一個(gè)span標(biāo)簽，對(duì)于程序員來(lái)說(shuō)，是額外的負(fù)擔(dān)，畢竟在VS2005里面，沒(méi)有現(xiàn)成的span標(biāo)簽控件；雖然可以添加一個(gè)label控件，但還是需要切換到代碼試圖中進(jìn)行調(diào)整，不太方便。本人建議直接在代碼試圖中添加span標(biāo)簽。其次就是按鈕的左側(cè)會(huì)有一些盲區(qū)（鼠標(biāo)移動(dòng)到這些部分，按鈕沒(méi)有被選中），這是因?yàn)閟pan標(biāo)簽設(shè)置了padding：0 0 0 20px；的原因。以后我會(huì)給去一個(gè)比較完滿(mǎn)的解決方案，來(lái)處理這兩個(gè)問(wèn)題。

本文來(lái)自CSDN博客，轉(zhuǎn)載請(qǐng)標(biāo)明出處：http://blog.csdn.net/moscodekidy/archive/2008/02/16/2099961.aspx