最近在做项目中发现,项目中的按钮基本上都是一张gif图片,这就很扯蛋了,最严重的问题就是,如果按钮中的文字超过了gif图片的长度,那么超过的部分就不显示了,这样一来岂不是操作性很低。当然了,这是难不倒万能的程序员的,下面附上我的解决方法:
一开始我的做法是
<input type="button" value="提交" class="cssLongButton">
CSS样式:
.cssLongButton{
height:24px;
border:1px solid #379AD8;
outline:none;
background: -webkit-linear-gradient(#FFFFFF, #DEF0E5); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#FFFFFF, #DEF0E5); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#FFFFFF, #DEF0E5); /* Firefox 3.6 - 15 */
background: linear-gradient(#FFFFFF, #DEF0E5); /* 标准的语法 */
//下边的代码是解决渐变的低版本IE兼容问题
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFFFFF",
endColorstr="#DEF0E5", gradientType="0");
}
这样就可以解决所有按钮的通用样式,如果长度增加,直接在各自的标签里加上style样式控制宽度就可以了。
但是这只针对高版本的IE浏览器,一旦浏览器添加兼容性视图,那么在点击按钮的时候,会出现黑色的框,目前并没有好的解决办法去解决outline的低版本IE兼容问题。但是我们仍然可以实现消除黑色框框的目的。
<span class="cssLongButtonSpan">
<input type="button" value="提交" class="cssLongButton"/>
</span>
CSS样式:
.cssLongButtonSpan{
height:24px;
border: 1px solid #379AD8;
border-bottom: 4px solid #379AD8;
display: inline-block;
}
INPUT.cssLongButton{
height:24px;
border: none;
background: -webkit-linear-gradient(#FFFFFF, #DEF0E5); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#FFFFFF, #DEF0E5); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#FFFFFF, #DEF0E5); /* Firefox 3.6 - 15 */
background: linear-gradient(#FFFFFF, #DEF0E5); /* 标准的语法 */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFFFFF", endColorstr="#DEF0E5", gradientType="0");
}
这里是拐个弯消除了黑色框框,在输入框的外边加了一层span标签,span标签用于描绘原本应加在input标签上的样式,把input的border的属性设置为none就可以了。
完美解决。