处理各大浏览器的显示风格迥异的问题

做任务的时候，发现，设计组给的psd文件的 上传文件中的的风格长这样
。
而实际中的各大浏览器一个长这样：
。

这样就导致如果我们只是针对其他的一个浏览器样本改动代码，那么显然是不可取的，但是如果要是对多个浏览器都处理到位那么代码未免太多，现在大家都普遍采用的是把它设置为opacity:0;进行更改，然后设置一个div设置跟input type = “file”同级，再在div里面放一个,用js控制获取input type = “file”的值放到的值里面。

    
type="text" class="txt">
    "mutitple" type = "file" style = "opacity:0" id = "file_input">
    

下面我们就来写一下前面提到的设计稿的样式，改一下我们的div样式。

<style type="text/css">
    div{

        width: 200px;
        height: 30px;
        border: 1px solid black;
    }
    div>label{
        float: right;
        width: 40px;
        height: 30px;
        margin-right: 10px;
        background: #88b5df

    }
    .txt{
        border: 0;
        width: 150px;
        height: 25px;

    }
style>

效果如图：

html Dom querySelector()方法：

querySelector是HTML5中类jQuery选择器。还有个querySelectorAll.两个方法使用差不多的语法。，都是接收一个字符串参数，这个参数需要时合法的css选择语法。和query的选择器差不多。具体看博客：
http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html

---