码迷,mamicode.com
首页 > 其他好文 > 详细

兼容IE及chrome的浏览按钮

时间:2014-06-10 15:32:46      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   ext   

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

在IE上为:bubuko.com,布布扣
在chrome为:bubuko.com,布布扣

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

<html>
<style>
    .image_upload{float:left;margin-top:-20px;*margin-top:-20px;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 onchange=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





兼容IE及chrome的浏览按钮,布布扣,bubuko.com

兼容IE及chrome的浏览按钮

标签:style   class   blog   code   http   ext   

原文地址:http://blog.csdn.net/woaipaiqiu/article/details/29381015

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!