拆卸按钮白色角落IE

Question

我有一个创建了我的网站自定义按钮看起来精致镀铬

但在IE它有白色的角落

我尽我所能去除白色的角落，但我不知道如何。

下面是我用下面的风格：

<input type="submit" value="Search" class="button1"> 

和CSS规则是：

.button1{ 
     height:26px; font-size:12px; font-weight:bold; cursor:pointer; float:right; 
     padding-left:10px; padding-right:10px; margin:2px; font-family:verdana,arial, helvetica, sans-serif; 
     border:1px solid #000; border-width:1px; float:left; 
     -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius:  5px; 
     -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; 
     -webkit-border-top-left-radius:  5px; -moz-border-radius-topleft:  5px; border-top-left-radius:  5px; 
     -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; 
     background-color:#F00; 
     background: rgb(254,255,232); /* Old browsers */ 
     background: -moz-linear-gradient(top, rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)), 
      color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */ 
     background: linear-gradient(to bottom, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0); /* IE6-9 */ 


    } 

Answer 1

这是一个重复的this question。

给出的解决方案建议添加一个包装div来处理角落和IE无法混合和匹配。 http://jsfiddle.net/UME84/

.corners { 
    border:1px solid #000; 
    border-radius:5px; 
    margin:2px; 
    overflow:hidden; 
    float:left; 
} 

测试IE9。

Answer 2

对于IE9-

<!--[if gte IE 9]><style type="text/css">.button1 {filter: none;}</style><![endif]--> 

或者设置所有我中的border-radius:0px; ES

<!--[if IE]> 
     <style type="text/css"> 
     .button1 { 
      filter:none; 
      border-radius:none; 
     } 
     </style> 
    <![endif]--> 

CSS：

.button1{ 
     height:26px;cursor:pointer; 
     padding-left:10px; 
     padding-right:10px; 
     margin:2px; 
     font:bold 12px verdana,arial,helvetica,sans-serif; 
     float:left; 
     border:1px solid #000; 
     border-radius:5px; 
     background: #feffe8; 
     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmZlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmRiYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
     background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf)); 
     background: -webkit-linear-gradient(top, #feffe8 0%,#d6dbbf 100%); 
     background: -o-linear-gradient(top, #feffe8 0%,#d6dbbf 100%); 
     background: -ms-linear-gradient(top, #feffe8 0%,#d6dbbf 100%); 
     background: linear-gradient(to bottom, #feffe8 0%,#d6dbbf 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0) 
} 

PS：未经测试

请带上谁仍然会使用IE较老的IE用户下载Google Chrome Frame