Pseudo Element（：after）在FF / IE中不起作用，但在Chrome中工作？

Question

见Codepen：

http://codepen.io/anon/pen/wcybk

该按钮在Chrome中运行，但不在IE / FF

<input name="input_15" id="input_6_15" class="medium" tabindex="8" type="file">
#input_6_15{position:relative;}
#input_6_15:after {
content: "Upload Media";
width: 150px;
height: 20px;
background: none repeat scroll 0% 0% #626D2D;
display: block;
position: absolute;
padding: 8px 5px 10px;
color: #FFF;
visibility: visible;
top: 4px;
left: -38px;
text-transform: uppercase;
text-align: center;
line-height: 26px;
z-index: 99999999;
}

Answer 1

我发现Firefox和IE很难在输入上渲染伪元素（更多关于它的信息：Bug 724369 - :after :before pseudo elements for input elements）。

我的解决方案是使用它：

    @ -moz-document url-prefix（）{// Firefox代码在这里     }

然后定位输入元素的容器div。