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

最新推荐文章于 2023-01-30 18:19:32 发布

调皮的芋头

最新推荐文章于 2023-01-30 18:19:32 发布

阅读量286

点赞数

分类专栏： css javascript 文章标签： bootstrap file不美观 input file不好看优化火狐file ViewUI

javascript 同时被 2 个专栏收录

140 篇文章

订阅专栏

css

23 篇文章

订阅专栏

本文讨论了使用Bootstrap时遇到的三个浏览器兼容性问题：火狐浏览器中上传文件控件显示不美观、IE浏览器中下拉框不美观、以及IE8中Bootstrap导航栏背景及边框显示为黑色。提供了相应的解决方法，包括修改样式代码以适配不同浏览器，以及在特定浏览器版本中引入特定CSS文件或JS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用bootstrap 遇到的问题

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

以下是期望的效果:

解决办法:

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

 <script type="text/javascript">
        //适配File 在火狐中不美观的问题
        var fileInputAdapt=function(inputFile222){//style="padding-top: 0px; border: none;box-shadow:none"
            var brow=$.browser;
            if(brow.mozilla){//Firefox
                inputFile222.style.border='none';
                inputFile222.style.boxShadow='none';
                inputFile222.style.paddingTop='0px';
            }
        };
 window.onload=function(){
  fileInputAdapt(com.whuang.hsj.$$id('exampleInputFile'));
}
 </script>

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

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

解决方法:

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

最后的效果:

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

在IE8中的界面:

进入页面时

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

解决导航栏背景是黑色:

在head中添加

 <!--[if IE 8 ]>  <link rel="stylesheet" href="css/ie8_yunma.css"> <![endif]-->

ie8_yunma.css的内容:

A {
    background-color:white;
}

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

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

解决方法:

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

 <!--[if IE 8 ]>
<script >
    var ie8_ok=function(){//当浏览器是IE8才执行
        var brow=$.browser;

        if(brow.msie){
            $('ul.secondNavigate').css('border-bottom-color','#ddd');//导航菜单边框是透明的
            $('ul.secondNavigate').css('border-left-color','#ddd');//导航菜单边框是透明的
        }};
</script>

    <![endif]-->

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

  var brow=$.browser;
        if(brow.msie && ie8_ok && ie8_ok!=undefined){//当浏览器是IE,并且IE版本是8才执行
            ie8_ok();
        }

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