【分享】文件选择控件 input[type=file]的外观可能会引起兼容性问题

[WebAdvocate]

input[type=”file”]
大家应该都使用过 input[type=’file‘]，这个控件允许用户在其本地选择文件，通常由一个用于显示文件名的只读文本框及一个用于触发选择文件对话框的按钮组成。注意，文本框为只读的，并且外观如何标准并没有规定。因此，各浏览器按照自己的方式渲染该控件，不算不符合标准，只是实现有差异罢了。

外观差异
测试代码很简单：

<input type="file" />

选择文件前在各浏览器中的差异截图：

选择文件后在各浏览器中的差异截图：


可见，此控件在各个浏览器中大体上区别是，在Webkit浏览器中，以一个 按钮和一个Lable的形式呈现，其他浏览器中以只读输入框后跟一个按钮的方式呈现。

可能引起的问题
因为样子不同，所以，宽度可能不同，可能会引起少许的布局差异。
还可能引起这个问题：

<input type="text" style="width:156px;position:absolute;"><input type="file" style="">

以自己的文本框代替input[type=”file”]的文本框，但是在Webkit浏览器中就………………

解决方案
用其他元素模拟……
见：http://www.w3help.org/zh-cn/causes/HF3001 的解决方案部分

原文地址
http://www.w3help.org/zh-cn/causes/HF3001

更多兼容性问题：
【分享】浏览器兼容性问题目录

[街头小贩]

辛苦了

[tizll521]

这个 。。。。 学习了

[a472198674]

good>>>>>>>>>>>>>>>>>>>>>>