HTML/CSS按钮不能在IE中正确显示

Question

我在HTML表单中有四个按钮。 下面是HTML：

   <div class="fileinputs"> 
        <input type="file" class="file" name="uploadedfile" /> 
        <div class="fakefile"> 
          <img src="../assets/images/uf_btt.png" /> 
        </div> 
       </div> 
       <div class="fileinputs"> 
        <input type="reset" class="file" /> 
        <div class="fakefile"> 
          <img src="../assets/images/reset_btt.png" /> 
        </div> 
       </div> 
       <div class="fileinputs"> 
        <input type="button" class="file" onclick="window.print()" /> 
        <div class="fakefile"> 
          <img src="../assets/images/print_btt.png" /> 
        </div>      
       </div> 

这里是CSS：

input[type=submit] 
{ 
    width: 119px; 
    height: 47px; 
} 

input[type=button] 
{ 
    width: 119px; 
    height: 47px; 
} 

input[type=reset] 
{ 
    width: 119px; 
    height: 47px; 
} 

input[type=file] 
{ 
    width: 119px; 
    height: 47px; 
} 

div.fileinputs { 
    position: relative; 
    float: left; 
} 

div.fakefile { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

input.file { 
    position: relative; 
    text-align: right; 
    -moz-opacity:0 ; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    z-index: 2; 
} 

所有四个按钮都显示正常，除了IE，他们在那里有点错位所有的浏览器。在我看来，IE浏览器并不知道如何将图片放在'文件'输入类型之上，因此它的右边有一个空格，它是透明的“浏览”按钮。如果你在IE中打开页面并尝试使用这些按钮，你会明白我的意思：eximi.dreamhosters.com/Hawaii/html/contact_email.php 有什么想法吗？

谢谢！

Answer 1

IE浏览器不理解像[type = button]这样的css选择器。

改为使用类。

我知道，这是不幸的，烦人..它是IE浏览器。

Answer 2

这是一个有点长镜头，但尝试把

position: relative; 

的风格

您的按钮（即.submit，.PRINT，.reset段）。

我已经解决了这个问题，它解决了IE中一些神秘的CSS问题。我找到了一个引用，这是指IE浏览器的魔术：http://www.communitymx.com/content/article.cfm?cid=C37E0