兼容IE6、7、8及chrome、fifox、Safari等各浏览器的浏览按钮

最新推荐文章于 2019-04-02 11:10:26 发布

echo_blue-eyes

最新推荐文章于 2019-04-02 11:10:26 发布

阅读量1.8k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/woaipaiqiu/article/details/29381015

版权

web 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

浏览本地文件的浏览按钮，其实有一个专门的控件，即：<input type=file>file控件，但是file控件在不同的浏览器上显示的方式不同：

在IE上为：

在chrome为：

chrome中显示的file控件的样式不太美观，用下列方式既可保证在chrome中的美观，又可保证在IE的兼容性；

<html>
<style>
    .image_upload{float:left;margin-top:-20px;*margin-top:-20px;position: absolute; filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
</style>
<body>
<td>
    <div>
    <input type=text id=file_text name=file_text>
    <input type=button id=brower_btn name=brower_btn value='浏览'>
    </div>
    <input type=file id=file name=file οnchange=file_text.value=this.value class=image_upload>
</body>
</html>

代码解释：在外部看到的是自己定义的文本框和浏览按钮，其实真正器作用的是被style样式隐藏掉的file控件；

1. 使file控件隐藏的是style中的opacity属性：

opacity属性设置元素的不透明级别；IE8以及更早的版本支持替代的属性filter，即opacity：0；和filter:alpha(opacity=0);作用效果是一样的，只不过为了兼容IE8以前的版本；

opacity语法：opacity:value|inherit

value:规定不透明度，从0.0(完全透明)到1.0(完全不透明)；

inherit :规定应该从父元素继承opacity的值；

2. float及margin-top属性是为了调整控件的位置，其中的margin-top和前加*的margin-top是为了兼容IE和chrome