兼容火狐--常见问题修改

此文为本人在实际工作中遇到的情况做的记录，所以比较乱，主要用于自己日后查看。如果对大家有帮助，当然也更好。

最普遍的情况

当遇到功能不好使的情况，首先按f12看控制台有没有报错、
A如果有定位错误
常见错误：window.frames[“iframe_table”]
去定位到报错位置 然后改成 ( " i f r a m e [ i d = ′ i f r a m e t a b l e ′ ] " ) 如 ： 原 来 ： w i n d o w . f r a m e s [ " i f r a m e t a b l e " ] . l o c a t i o n . h r e f = g p m . c x t j . u r l ; 改 成 ： ("iframe[id='iframe_table']") 如：原来：window.frames["iframe_table"].location.href = gpm.cxtj.url; 改成： ("iframe[id=′iframet​able′]")如：原来：window.frames["iframet​able"].location.href=gpm.cxtj.url;改成：(’#iframe_table iframe’).attr(‘src’, gpm.cxtj.url);
原来：window.frames[“iframe_table”].window.reloadGrid(gpm.gridConfig);
改成： $(“iframe[id=‘iframe_table’]”)[0].contentWindow.reloadGrid(gpm.gridConfig);

具体根据你要修改的业务模块逻辑来，可以去看common/js/topinit.js来参考。
B其他报错根据模块具体报错调整，如果是大面积公共错误可以和我说我来看。

如果不报错，bi报表刷不出来或者出错
A:刷不出来，看你引用的resulttable.js 找到全部的
obj_table.HeaderDataSource = “header”;
obj_table.DataSource = “table”;

改成：
obj_table.attributes.datasource.value = “table”;
obj_table.attributes.headerdatasource.value = “header”;
或者
obj_table.setAttribute(“HeaderDataSource”, “header”);
obj_table.setAttribute(“DataSource”, " table");

B：如果刷新的是个abc这种表格，去找引用的qc.js
obj_table.HeaderDataSource = “header”;
obj_table.DataSource = “table”;

改成：
obj_table.attributes.datasource.value = “table”;
obj_table.attributes.headerdatasource.value = “header”;

如果有样式和其他好使的模块不一致，查看自己引用的topinit.js common.css对照common文件下的改。

细项记录

主要在兼容减税降费和社保费审核过程中发现的一些问题，记录下来以备后患。
判断是否是IE的方法：

function isIE(){
  debugger;
  if (window.navigator.userAgent.indexOf("MSIE")>=1)
    return true;
  else
    return false;
}

1.1 display:inline;

火狐会挤在一块，需要和float:left同时使用。
问题案例：
表样的单位报表期那行内容挤在一块了。
原因是，火狐用了display:inline;就会挤在一起，但是不用的话又会自动换行。
解决办法：加了个float:left后就好了。

1.2 父元素无具体宽度有text-align:center；子元素有具体宽度

火狐子元素在父元素中居左。
火狐子元素需要加上margin:auto；就可以了
问题案例：
发现表头合并单元格的内容不居中
原因：在火狐中父元素用了text-align:center，但是子元素有具体宽度的话，父元素的居中会失效。
尝试：
有人说火狐里面要用：text-align: -moz-center !important;才行，但是测试依然无效；
有人说火狐要在子元素上加margin:auto；我在在线编辑测试了是有效的，但是在BI中测试依然无效；然后我直接在F12的时候加上margin，居然也有效。那么问题就转换为我加的margin：auto不见了。
所以认为不是样式失效，而是样式没有成功赋值。
最终找到其最终样式是直接设在CSS中的，在CSS中添加margin:auto后就OK了。

1.3 对字符串中的标签大小写

IE大写，火狐小写
解决办法：换非标签的标识或者兼容大小写
问题案例：
右键下钻的面板打开失败
问题描述：点击金额列进行右键点击没反应
原因：在识别减税性质那一列的时候本来的条件是这样的：

问题就出在这个indexOf(‘DIV’)；在IE中是大写的DIV，但是在火狐中是小写的div；所以在火狐中进不去这个条件。
解决办法：改为其他标识符来判断

1.4 Propertychange事件

火狐没有这个事件
问题案例：
 问题1：更换日期控制往期数据对比的显隐失效。
分析思路：
1）因为在FH-1（另一个模块）也用到了这种内容改变监听，试了下fh-1在火狐下是可以的。所以参考下fh-1的事件。但是发现无效。
2）而且fh-1只有联想时才有用，日期控件就没用。再次猜测是不是日期控件的问题，所以用了户数控件测试，发现火狐依然不行。
3）再次猜测是不是只有可输入的输入框才能检测，所以又临时随便加了一个文本框测试，发现果然如此，火狐就能监控到了。
所以缩小范围为：火狐可以input propertychange事件监控到文本框的变化，但是监控不到下拉框的变化。
4）后来百度才反应过来，propertychange事件是IE独有的事件，之所以在chrome下也好使，不是因为propertychange事件可以用，而是因为bind(“input propertychange”)这是绑定了两个事件，生效的是input事件。
可是 我们要监控的是日期控件和下拉框控件，那怎么办呢？火狐又没有propertychange事件。
最终换了条思路：既然火狐没办法监控日期变化了，那么就换种方式达到同样的目的。也就是点击日期框的时候保存下来旧的值，选完日期后，点页面的任何位置就触发对比当前日期和保存的日期是否相同，不同则进入内容变化事件。

if(isIE()){
    $("#datetimeq").bind("input propertychange", function () {
     timeChange();
    });
   }else{
    var oldValue="";
    $("#datetimeq").bind("click",function () {
      oldValue=$("#datetimeq").val();
      $('body').on('click',function(){
        var newValue=$("#datetimeq").val();
        if(newValue!=oldValue){
          timeChange();
        }
      })
     });

1.5 ActiveXObject

火狐报错
问题案例：
ReferenceError: ActiveXObject is not defined
报错点：

原因：ActiveX是微软独有的，只有基于IE内核的浏览器才能使用。
解决办法：兼容代码

var xmlHttp ;
 if(window.ActiveXObject){
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }else if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
 }

1.6 获取html标签自定义元素

IE: 可以通过对象点出来
火狐：不能通过对象点出来
兼容写法：document.getElementById(‘span1’).attributes[‘time’].nodeValue;
问题案例：
清册下钻获取不到参数
原因：火狐不能直接获取到html元素的自定义属性
有时候在html中自定义属性能够方便我们，
比如hello,
通常在ie中获取time的办法是：document.getElementById(‘span1’).time就行，
但是这个方法在firefox下不管用，兼容的做法是这样的：
document.getElementById(‘span1’).attributes[‘time’].nodeValue;
解决办法：框起来的是以前获取的方式

1.7 Fh-1清册导出问题

报错
导出没反应，原因是在下图处报错

原因：我的这个iframe里没有id，没有id的原因是加id是在下图的方法中加的，

但是我做了一个判断 isJump=ture的时候一顿操作之后就return了 下面那个就没跑：

就导致没有加上id.
解决办法：因为这个方法我确实也不用，所以我就将通过id定位改成了name定位

1.8 下拉树的层级显示不对

定位到显示树的地方，去添加了z-index

加上之后火狐好了，可是IE又出问题了。所以需要判断浏览器区分。

1.9 关闭按钮的层级显示不对

解决：在右键出来的面板上加上层级z-index:1999

1.10 火狐不支持cursor:hand;的写法

原因：在CSS中手型指针有cursor:hand和cursor:pointer两种写法,其中cursor:hand在FireFox中不支持,返回错误! 只要使用cursor:pointer即可解决问题，FF和IE都支持,且Google的浏览器也支持！cursor:pointer应该是符合W3C标准的。 cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。 cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。 IE5 IE6 IE7 Firefox cursor:pointer × √ √ √ cursor:hand √ √ √ × 看来以后用cursor:pointer 是最好的了
解决办法：改成pointer

1.11 渐变色的背景色需要做兼容

IE系列

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FF0000’,endColorStr=’#F9F900’,gradientType=’0’); 

参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平
Firefox

background: -moz-linear-gradient(top, #FF0000, #F9F900); 

参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变
Opera

background: -o-linear-gradient(top,#FF0000, #F9F900); 

参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变
webkit，如Chrome、Safari等

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));

1.12 火狐中在父元素有position: absolute;子元素未居中。(表头未居中)

子元素设置：margin:auto;

1.13 窗口表头放大缩小自适应添加

属于优化，加上下面代码后就可自适应表头了.

$(window).resize(function () {
  debugger;
  var result_width=$('#div-result').width();
  var curId=PresentBtn+"#"+INIT_3.PresentSwjgDm+"#"+INIT_3.PresentBBNY+"D_tableHead";
  if($("[id='"+curId+"']").length>0){
    $("[id='"+curId+"']").width(result_width-17);
  }
})

1.14 点击审核信息的放大 出来的是被截掉的页面

问题描述：发现在火狐中点击放大审核结果页面的时候，页面的结果不会全部展示，它只会放大之前的页面有什么就展示什么，但是手动拖动时，就可以展示全部。具体原因不知道，可能是火狐的BUG吧。
解决思路：由于拖动这种缓慢改变高度的行为可以展示完整的界面内容，所以就改变高度的样式设置的地方设置了动画，虽然是0秒，但是可以完整展示出来了。
解决办法：

1.15 发现火狐的点击对比出来的窗口高宽与预期不符

原因：虽然laryer打开的内容的高宽是正确的，但是外层的laryer的宽度不对；可能火狐不能自己填充，但是IE可以被内容撑起来。
解决办法：手动设置弹出层的宽度为100%

同时优化将弹出层的内容也设为了100%；这样放大缩小就可以自适应全屏了。

1.16 火狐disabled没置灰样式

在火狐中用了disabled虽然功能确实被禁用了，不能点了，但是样式没有置灰，需要手动置灰。