html - 自定义按钮输入类型图像 IE9+

Question

我在 IE9+ 上显示这个按钮时遇到问题。如何删除按钮上显示的表单？

HTML

<input type="file" name="image" class="file_button_upload" />

CSS

    .file_button_upload{
     width: 160px;
     overflow: hidden;
     font-size: 0px;
     height: 30px;
     margin-bottom: -15px;
     display: inline-block;
     background: url(http://www.festivalbenicomuni.it/wp-content/themes/festival/img/bg_btn.jpg);
     border: 3px solid #000;
     padding: 6px 0px;
     width: 160px;
     font-size: 0px;
     color: #000;
     font-family: 'DINPro-Bold';
     text-align: center;
     overflow: hidden;
     text-indent: -9999px;
}

JSFIDDLE

Answer 1

You Should use conditional CSS for IE browsers like

<!--[if lte IE 9]>
<style>
 .file_button_upload{
 width: 160px;
 overflow: hidden;
 font-size: 0px;
 height: 30px;
 margin-bottom: -15px;
 display: inline-block;
 background: url(http://www.festivalbenicomuni.it/wp-content/themes/festival/img/bg_btn.jpg);
 border: 3px solid #000;
 padding: 6px 0px;
 width: 160px;
 font-size: 0px;
 color: #000;
 font-family: 'DINPro-Bold';
 text-align: center;
 overflow: hidden;
 text-indent: -9999px;
}
</style>
<![endif]-->

或

你也可以使用

http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/