Question

好吧，我收到了这段代码：

<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'时它会变白。

有人知道如何修复它吗？感谢。

Answer 1

我非常感兴趣为什么这个解决方案不适用于IE7 / IE6，所以，要安装Windows XP（随IE6一起提供）并测试小提琴！

首先我测试了这个： ^{应该按照规定here!}

工作

See the 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 support}，我删除了input[type=file]并用一个普通的老班代替 .the_file。最终结果是在解决OP的问题上取得了圆满成功：

请参阅Fiddle with 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
Opera 11.64
K-Meleon 1.5.4
FF 3.6.16
Google Chrome 18.0.1025.168 m
Safari 5.1.2（7534.52.7）
IE 7 v9.0.8112.16421IC ^在win7下

还注意到你提到的文字变白了！在任何测试中都没有发生过！}

ie7上的不透明度输入文件，ie8

1 个答案:

最后的注释：