如何解决outline兼容低版本IE？

最近在做项目中发现，项目中的按钮基本上都是一张gif图片，这就很扯蛋了，最严重的问题就是，如果按钮中的文字超过了gif图片的长度，那么超过的部分就不显示了，这样一来岂不是操作性很低。当然了，这是难不倒万能的程序员的，下面附上我的解决方法：

一开始我的做法是

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兼容问题。但是我们仍然可以实现消除黑色框框的目的。

    

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就可以了。

完美解决。