使用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();
- }
解决展开和收起时背景有黑色的问题: