bootstrap input file在火狐浏览器中不美观-阿里云开发者社区

开发者社区> 黄威的世界> 正文

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.   

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9862 0
通过input上传图片,判断不同浏览器及图片类型和大小的js代码
1.jsp页面代码   [html] view plain copy                                                                                                       ...
832 0
x3d
Mozilla Firefox, Apple Safari,Chrome等主流浏览器均开始WebGL支持
WebGL已出现在Mozilla Firefox, Apple Safari, 如今您已可在最新开发者预览版Google Chrome浏览器中试用WebGL。 莫非这次是玩真的?! 原文: http://news.cnet.com/8301-30685_3-10357723-264.html?tag=mncol;txt WebGL可在最新的Chrome开发者预览版中使用 - 但必须在启动Chrome时在命令行中添加"--enable-webgl" 及 "--no-sandbox"选项。
685 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13590 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11807 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7227 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4367 0
+关注
黄威的世界
我是一个热衷IT技术的人,希望自己不断地设计开发出对别人非常有用的软件。有近7年的java开发经验(包括2年Android开发经验)和一年左右的linux使用经验。擅长Java Web后台开发 ,喜欢研究新的各种实用技术
668
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载