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

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)并测试小提琴!

首先我测试了这个: ^{应该像这里说的那样工作!}

看小提琴!

<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;
}

最后的笔记:

这是在Windows XP Professional v2002 SP2上使用IE6 v.6.0.2900.2180进行测试,然后使用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米
• Safari 5.1.2(7534.52.7)
• ^win7下的 IE 9 v9.0.8112.16421IC

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