`

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

阅读更多

使用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();
        }

 

 

 

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

  

 

 

 

 

  • 大小: 14.5 KB
  • 大小: 12.5 KB
  • 大小: 12.6 KB
  • 大小: 4.8 KB
  • 大小: 2.9 KB
  • 大小: 56.7 KB
  • 大小: 17.5 KB
  • 大小: 20.4 KB
  • 大小: 17.2 KB
  • 大小: 35 KB
  • 大小: 52.3 KB
1
1
分享到:

相关推荐

    bootstrap-file-input

    1. **引入依赖**:在页面中引入Bootstrap CSS和JS,以及Bootstrap-File-Input的CSS和JS文件。 2. **HTML结构**:创建一个基础的HTML文件输入元素,并设置必要的属性,如id和name。 3. **初始化插件**:通过...

    文件上传插件bootstrap File

    9. **异步上传**:Bootstrap File Input支持异步上传,即在后台上传文件,不影响用户继续浏览其他页面,提升了用户体验。 10. **自定义事件和回调函数**:插件提供了一系列的自定义事件和回调函数,允许开发者在...

    bootstrap中input框清除按钮

    bootstrap input 框 清除 小插件、很简单的一个小的js,引入即可。省时省力。

    Bootstrap File Input 控件离线文档

    在实际开发过程中,掌握Bootstrap File Input的使用技巧,能够提升网站或应用的用户体验,尤其对于需要处理大量用户上传文件的场景,如社交媒体、文件共享平台等,它的价值尤为突出。通过深入学习离线文档,开发者...

    文件上传input file简便美化方案(css)

    在实际操作中,由于CSS3的alpha通道滤镜仅在IE浏览器中有效,因此为了达到透明效果,我们可能需要使用.filter(在IE浏览器中)和._filter(为了兼容旧版的IE浏览器)来进行兼容性处理。此外,对于非IE浏览器,我们还...

    前端项目-bootstrap-filestyle.zip

    "bootstrap-filestyle"是一个专门针对Bootstrap的插件,它使得在Bootstrap环境中定制上传文件输入框的样式变得更加简单。这个插件的目标是解决在Bootstrap框架下,文件上传控件样式不统一,无法完美融入整体设计的...

    Bootstrap File Input 参考手册

    在功能方面,最新版本的Bootstrap File Input插件可以将简单的HTML文件输入转换为高级文件选择器控件,并且当浏览器不支持jQuery或JavaScript时,能够回退到普通HTML文件输入。文件输入由以下三个部分组成,每个部分...

    input type=file 显示的浏览 改成英文

    在网页设计中,`&lt;input type="file"&gt;` 是HTML元素的一个重要部分,它用于创建一个文件上传控件。默认情况下,这个控件的文本提示和按钮是根据用户的操作系统语言来显示的,例如,在中文环境下会显示“浏览”或“选择...

    Bootstrap样式文件上传jquery插件

    在这个框架中,文件上传功能往往显得较为平淡无奇,不符合整体的美观标准。而bootstrap-filestyle插件就是为了弥补这一不足,通过简单的配置,可以将原始的、样式简单的文件上传按钮转变为具有Bootstrap样式的、功能...

    Bootstrap4数值输入插件

    Bootstrap4数值输入插件是基于流行的前端框架Bootstrap 4开发的一款实用工具,它极大地简化了在Web表单中创建数值输入 spinner 的过程。Spinner是一种允许用户通过点击或使用箭头键来增加或减少数值的控件,常用于...

    Bootstrap tagsinput自定义标签插件

    Bootstrap tagsinput是一款强大的前端开发工具,它专门设计用于在Bootstrap框架内创建自定义标签输入功能。这个插件允许用户以标签的形式输入和管理数据,极大地提升了用户体验,尤其适用于需要多标签选择的场景,如...

    基于BootStrap简洁美观Cron表达式选择器JS插件

    **基于BootStrap简洁美观Cron表达式选择器JS插件**是一款优秀的前端开发工具,专为需要在用户界面中方便地输入或选择Cron表达式的项目设计。Cron表达式是一种广泛用于计划任务调度的语言,它允许设置精确的时间间隔...

    bootstrap4 input数值微调插件

    bootstrap-input-spinner是一款基于bootstrap4和jquery的input输入框数值微调插件。该插件会为输入框添加增加和减少按钮,通过点击相应的按钮,来对输入框中的数值进行微调。

    BootStrap file upload demo

    在"BootStrap file upload"中,主要涉及以下几个核心知识点: 1. **Bootstrap样式库**:Bootstrap提供了一系列预先设计的CSS类,可以快速创建出一致的布局、排版和组件样式。在文件上传中,这些样式用于美化上传...

    bootstrap-tagsinput-master.zip

    在"bootstrap-tagsinput-master.zip"这个压缩包中,包含了使用Bootstrap Tagsinput所需的所有必要资源,主要包括JavaScript文件和CSS文件。当你将这个压缩包解压后,你会在"dist"文件夹内找到这些文件。下面我们将...

    bootstrap-tagsinput.zip

    在压缩包文件"bootstrap-tagsinput"中,通常会包含以下文件: - `bootstrap-tagsinput.css`: 插件的样式文件,用于定义标签的外观。 - `bootstrap-tagsinput.js`: 插件的JavaScript代码,实现标签输入功能。 - 可能...

    bootstrapfileinput.zip

    总的来说,Bootstrap File Input是基于Bootstrap的强大的文件上传解决方案,它提供了丰富的功能和高度的可定制性,让开发者能够轻松地在网站或应用中实现美观且实用的文件上传功能。无论是在企业级应用还是个人项目...

    input file选择文件之后自动上传(样式自定义美化)

    "input file选择文件之后自动上传(样式自定义美化)"这个主题聚焦于一个常见但有时被忽视的用户体验改进点:如何在用户选择文件后立即启动上传,并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...

    bootstrap-tagsinput 下载,中文版,标签插件

    原版的bootstraptagsinput插件,内容太过繁杂,也不知道如何使用。里面好多冗余文件。本压缩保内的所有文件均为必须文件,采用输入框和多选框两种方式。...我在C# MVC5中遇到了此问题,顺便分享下。

    Bootstrap用户输入密码显示隐藏代码

    在Bootstrap的表单设计中,密码输入字段通常使用`&lt;input&gt;`元素的`type="password"`属性来创建。这会自动隐藏用户输入的字符,以保护用户的隐私。然而,为了给用户提供更多控制,我们通常会添加一个切换按钮,让用户...

Global site tag (gtag.js) - Google Analytics