1

好吧，我得到了这个代码：

<div class="teste">
    <input type="file" name="teste" />
    teste
</div>

CSS：

.teste {
   width:300px;
   height:100px;
   position:absolute;
   top:10px;
   right:10px;
   overflow:hidden;
   background-color:#FF0000;
   opacity:1; 
   filter:alpha(opacity=100);
}

input[type=file] {
   position:absolute;
   top:0px;
   right:0px;
   font-size:300px;
   opacity:0;
   filter:alpha(opacity=0);
}

在 FF 和 Chrome 中完美运行，但在文本“teste”变白时，我发现当输入文件超过文本“teste”时，它会变白。

有人知道如何解决吗？谢谢。

4

1 回答 1

10

我对为什么该解决方案无法在 IE7 / IE6 上运行非常感兴趣，因此，安装 Windows XP（IE6 随附）并测试 Fiddle！

首先，我对此进行了测试： 应该按照此处所述工作！

见小提琴！

<div class="teste">
    <input type="file" name="teste" />
    teste
</div>

.teste {
   width:300px;
   height:100px;
   position:absolute;
   top:10px;
   right:10px;
   overflow:hidden;
   background-color:#FF0000;
   opacity:1;
   filter:alpha(opacity=100);
}

input[type=file] {
    display:block;
    width:300px;
    height:100px;
    position:absolute;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    top:10px;
    right:10px;
}

而且它没有用，所以，意识到浏览器已经过时了MS IE css 支持，我删除了input[type=file]它并用一个普通的旧类替换它 .the_file。最终结果是完全成功地解决了 OP 的问题：

请参阅带有TESTED 解决方案的小提琴！

<div class="teste">
    <input type="file" name="teste" class="the_file" />
    teste
</div>

.teste {
   width:300px;
   height:100px;
   position:absolute;
   top:10px;
   right:10px;
   overflow:hidden;
   background-color:#FF0000;
   opacity:1;
   filter:alpha(opacity=100);
}

.the_file {
    display:block;
    width:300px;
    height:100px;
    position:absolute;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    top:10px;
    right:10px;
}

最后说明：

这是在带有IE6 v.6.0.2900.2180的Windows XP Professional v2002 SP2上测试的，之后使用IE7 v.7.0.5730.13进行了更新和测试。

在 IE7 上，两种解决方案都有效！

更新：

现在也在测试：在相同的winXP下

  • IE 8 v8.0.6001.18702
  • 歌剧 11.64
  • K-Meleon 1.5.4
  • FF 3.6.16
  • 谷歌浏览器 18.0.1025.168 m
  • Safari 5.1.2 (7534.52.7)
  • win7下IE 9 v9.0.8112.16421IC

还注意到您提到文字变白了！在执行的任何测试中都没有发生！

于 2012-05-14T01:24:20.533 回答