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.   

 

 

相关文章
|
前端开发 JavaScript
Bootstrap File Input,最好用的文件上传组件(1)
Bootstrap File Input,最好用的文件上传组件
548 0
Bootstrap File Input,最好用的文件上传组件(1)
|
4月前
|
前端开发
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
|
9月前
|
JavaScript 前端开发 Java
|
10月前
|
Python
【Flask】flask-bootstrap报错AttributeError: module ‘dominate.tags‘ has no attribute ‘input‘解决方法
【Flask】flask-bootstrap报错AttributeError: module ‘dominate.tags‘ has no attribute ‘input‘解决方法
|
移动开发 前端开发 JavaScript
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
414 0
|
前端开发 JavaScript
bootstrap input框回车后重新刷新页面问题
需求是给bootstrap页面form表单中的input搜索框绑定回车事件,输入完成回车自动搜索
bootstrap input框回车后重新刷新页面问题
|
前端开发 程序员 内存技术
Bootstrap File Input,最好用的文件上传组件(2)
Bootstrap File Input,最好用的文件上传组件
239 0
Bootstrap File Input,最好用的文件上传组件(2)
|
前端开发
Bootstrap系列 -- 14. 表单控件输入框input
     每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。   单行输入框,常见的文本输入框,也就是input的type属性值为text。
1009 0