兼容IE及chrome的浏览按钮

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

在IE上为:

在chrome为:

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的浏览按钮

时间: 2024-10-12 12:59:56

兼容IE及chrome的浏览按钮的相关文章

原生js绑定和解绑事件,兼容IE,FF,chrome

主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件.贴上代码,这个是可以运行的,兼容 IE FF chrome 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu

如何将上传文件的浏览按钮修改为自定义按钮

最近,在修改一个国际化项目,碰到一个上传文件的地方,要将显示为的浏览按钮修改为自定义英文的英文按钮Brows,虽说那个按钮会根据系统语言自动切换,但就是在自己电脑上看着不爽,非要改成英文. 大致思想就是:将真的file进行隐藏,使用普通的text和button拼接成我们的文件上传样式.然后设置button的onclick事件,该事件响应的是又是file的click事件,最后设置file的onchange事件,当file改变时将file的value值填充到text的value中(也就是文件的上传路

关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助 Firefox 和 IE 的浏览器各自实现了input历史记录的功能,可以简化输入时的麻烦,但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如号码查询的input框,用户不会对同一个号码进行多次查询,就没有必要让浏览器记录. MSIE自定义了input 的扩展属性 autocomplete,置为off即可 <input typ

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() {

js离开或刷新页面检测(且兼容FF,IE,Chrome)

<!DOCTYPE html> <html> <head> <script> function closeIt() { return confirm("确定退出吗"); } window.onbeforeunload = closeIt; </script> </head> <body> <a href="http://www.jb51.net">Click here t

js 阻止浏览器 刷新 关闭、js监听浏览 关闭 刷新 兼容IE6+ Firefox Chrome

var UnloadConfirm = {}; UnloadConfirm.MSG_UNLOAD = "数据尚未保存,离开后可能会导致数据丢失\n\n您确定要离开吗?"; UnloadConfirm.set = function(a) {     window.onbeforeunload = function(b) {         b = b || window.event;         b.returnValue = a;         return a     } };

chrome安全浏览器之实现

浏览保护 安全浏览设置为可用时,所有的URL地址的内容在被加载前都需要先进行核查.URL地址将通过恶意网址和钓鱼网址两个列表进行核查.最终根据URL核对的那个列表,我们将在间隙页面显示对应的警告信息. 资源处理 不管什么时候资源被请求,资源分发宿主将创建一个链式资源处理器.这样可以控制资源加载过程的所有事件,每个处理器可以选择取消.暂停.继续这个请求.安全浏览资源处理器防止在链式处理器的开始,因此其最先决定是否允许加载这个资源.如果安全浏览被禁止了,那么安全浏览资源处理器将直接不被加到链式处理器

js判断上传文件的大小,及确认文件是否在本地存在,兼容firefox、chrome、ie等浏览器

<pre name="code" class="javascript">上传图片文件的html标签 <input name="file" type="file" id="<span style="color:#ff0000;">file</span>" accept="image/gif,image/jpeg,image/png&quo

JavaScript无提示关闭当前页面窗口,兼容IE/Firefox/Chrome

<script type="text/javascript" language="javascript"> function fc(){ var browserName=navigator.appName; if (browserName=="Netscape"){ window.open('','_parent',''); window.close(); } else if(browserName=="Microsoft