VS2005中LinkButton样式设置的技巧

在VS2005中，LinkButton控件最终解释为a标签。我们可以通过各种方法来对其添加样式，主要的方法是为LinkButton控件设置一个背景图片（background-image）。但这种方法有一个缺点， 就是同样的样式，如果按钮的字数不同，就需要很多张背景图片。例如：

上述情况就需要四张不同的背景图片。但在实际的应用中，会需要相当多的背景图片，特别是做OA，CRM等系统应用的时候，需要的背景图片就更多了！于是，为了减轻工作量，提高工作效率，我们可以采用这种方式来实现：在LinkButton控件外再套上一个span标签，并给这个span标签添加一个css类，用以绑定样式！

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

在浏览器中得到的html就是：<span class="wrapBtn"><a>确定</a></span>（已经去掉了与样式无关的代码）。然后在相应的css文件中写如一下代码：

.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条件注释（Conditional Comments）的方法，将这段代码分离开，以增强代码的可维护性和可读性。1.gif为背景图片，可以把它做得很宽，以适应以后的需求变化。这种方法只需要一张背景图片就可以满足同一样式所有按钮的要求，一个字“爽”！

这样做还有一个好处就是当你要对系统进行换肤的时候，可以极大的较少工作量！（以前改了好几个OA的UI，单单这样的按钮一次就要改近200个，人都要哭了！还有每个重命名，对号入座！还有一次做个网站，要求有换肤的功能，又是一个痛苦洗礼！早点用这种方法就轻松多了！）

这种方法也有不足的地方：首先就是需要多添加一个span标签，对于程序员来说，是额外的负担，毕竟在VS2005里面，没有现成的span标签控件；虽然可以添加一个label控件，但还是需要切换到代码试图中进行调整，不太方便。本人建议直接在代码试图中添加span标签。其次就是按钮的左侧会有一些盲区（鼠标移动到这些部分，按钮没有被选中），这是因为span标签设置了padding：0 0 0 20px；的原因。以后我会给去一个比较完满的解决方案，来处理这两个问题。