bootstrap input file在火狐浏览器中不美观

简介:

使用bootstrap 遇到的问题

(1)上传文件控件在火狐中显示不美观

 以下是期望的效果:

 

解决办法:

在页面的onload事件里面判断浏览器的类型,若是火狐浏览器,则修改样式:

Js代码   收藏代码
  1.  <script type="text/javascript">  
  2.         //适配File 在火狐中不美观的问题  
  3.         var fileInputAdapt=function(inputFile222){//style="padding-top: 0px; border: none;box-shadow:none"  
  4.             var brow=$.browser;  
  5.             if(brow.mozilla){//Firefox  
  6.                 inputFile222.style.border='none';  
  7.                 inputFile222.style.boxShadow='none';  
  8.                 inputFile222.style.paddingTop='0px';  
  9.             }  
  10.         };  
  11.  window.onload=function(){  
  12.   fileInputAdapt(com.whuang.hsj.$$id('exampleInputFile'));  
  13. }  
  14.  </script>  

 最后在火狐浏览器中的效果:

 

 

(2)下拉框在IE 中不美观



 解决方法:

Js代码   收藏代码
  1. //解决每页多少条的下拉框在IE中不美观的问题  
  2.        var brow=$.browser;  
  3.        if(brow.msie){  
  4.            com.whuang.hsj.$$id('select22Id').style.paddingRight='0';  
  5.        }  

 最后的效果:

 

(3)boostrap 导航在IE8中不兼容

在IE8中的界面:

进入页面时

 展开和收起过程中,出现黑色背景:

 

 解决导航栏背景是黑色:

在head中添加

Html代码   收藏代码
  1. <!--[if IE 8 ]>  <link rel="stylesheet" href="css/ie8_yunma.css"> <![endif]-->  

 ie8_yunma.css的内容:

Css代码   收藏代码
  1. A {  
  2.     background-color:white;  
  3. }  

 注意:只有在IE8中才会引用 ie8_yunma.css

 

解决边框是黑色的问题,现象如下:

 解决方法:

</body> 标签的后面添加:

Html代码   收藏代码
  1.  <!--[if IE 8 ]>  
  2. <script >  
  3.     var ie8_ok=function(){//当浏览器是IE8才执行  
  4.         var brow=$.browser;  
  5.   
  6.         if(brow.msie){  
  7.             $('ul.secondNavigate').css('border-bottom-color','#ddd');//导航菜单边框是透明的  
  8.             $('ul.secondNavigate').css('border-left-color','#ddd');//导航菜单边框是透明的  
  9.         }};  
  10. </script>  
  11.   
  12.     <![endif]-->  

 同时在window.onload方法中添加:

Js代码   收藏代码
  1. var brow=$.browser;  
  2.       if(brow.msie && ie8_ok && ie8_ok!=undefined){//当浏览器是IE,并且IE版本是8才执行  
  3.           ie8_ok();  
  4.       }  

 

 

 

解决展开和收起时背景有黑色的问题:

Java代码   收藏代码
  1.   

 

 

相关文章
|
6月前
|
Web App开发 Linux 数据安全/隐私保护
Docker本地部署Firefox火狐浏览器并远程访问
Docker本地部署Firefox火狐浏览器并远程访问
|
Ubuntu
ubuntu下安装火狐浏览器及快捷图标
ubuntu下安装火狐浏览器及快捷图标
1949 0
ubuntu下安装火狐浏览器及快捷图标
|
1月前
|
Web App开发 SQL 数据库
使用 Python 解析火狐浏览器的 SQLite3 数据库
本文介绍如何使用 Python 解析火狐浏览器的 SQLite3 数据库,包括书签、历史记录和下载记录等。通过安装 Python 和 SQLite3,定位火狐数据库文件路径,编写 Python 脚本连接数据库并执行 SQL 查询,最终输出最近访问的网站历史记录。
|
1月前
|
Web App开发 安全 中间件
谷歌、火狐、Edge等浏览器如何使用ActiveX控件
allWebPlugin 是一款为用户提供安全、可靠且便捷的浏览器插件服务的中间件产品,支持 Chrome、Firefox、Edge 和 360 等浏览器。其 V2.0.0.20 版本支持一个页面加载多个插件,并解决了插件与浏览器之间的焦点问题。用户可通过“信息化系统 + allWebPlugin + 插件 + 浏览器”的解决方案实现 ActiveX 插件的无缝集成。下载地址见文末,安装包含详细说明。
|
6月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
77 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
6月前
|
Web App开发 Linux 数据安全/隐私保护
如何在Docker环境下安装火狐浏览器并结合内网穿透工具实现公网访问
如何在Docker环境下安装火狐浏览器并结合内网穿透工具实现公网访问
138 0
|
6月前
|
Web App开发 JSON 前端开发
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
140 0
|
6月前
|
前端开发
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
417 0
|
前端开发
火狐浏览器的select下拉框样式兼容问题
火狐浏览器的select下拉框样式兼容问题
93 0

热门文章

最新文章

下一篇
无影云桌面