IE8 与 Chrome、Safari 和 IE9 的兼容性问题答案

【问题标题】：Compatibility issues with IE8 vs Chrome, Safari, and IE9IE8 与 Chrome、Safari 和 IE9 的兼容性问题
【发布时间】：2011-06-16 01:47:49
【问题描述】：

这可能是一个具有挑战性的任务！

我非常精通 AJAX 和 JavaScript，甚至编写 OOP JS 应用程序。因此，当我构建一个在 IE7、8、Opera、FF4 中完美运行的页面时，您可以想象我的沮丧。我的意思是，除非世界发生了变化，否则你只需要 IE 和 FF，真的，用于兼容性测试......对吗？？

错误（显然）

正如我所说，我有一个运行良好的复杂 js 应用程序。但如果在 Chrome 和 Safari 中失败。脚本加载了动态 DOM 创建和属性操作，我想我已经在一组脚本中隔离了这个问题......下面。

你们中的任何一个天才能认出这里的任何 JS 可能与 Chrome 和 Safari 有问题吗？我想我已经把它归结为破坏演示文稿的 .style 调用（想想 CSS）。顺便说一句，当我使用 IE9 进行测试时，它最终成为了完全相同的问题......这可能是一个线索。

我在网上进行了广泛的搜索，要么我错过了要搜索的正确关键词，要么......随便什么:)

    for(var i=0;i<list.length;i++){
    SupportContent.hrefArray[SupportContent.hrefArray.length] = list[i];
    if(i == list.length-1)SupportContent.bookMarkListing();
    ChangeDOM.addChildren({'elType':'div','id':'title~'+list[i]},this.displaySupport);
        var thisTitle = document.getElementById('title~'+list[i]);
        thisTitle.style.paddingTop = '15px';
        thisTitle.onclick = function(){SupportContent.manageLineOpenClose('arrow~'+this.id.split('~',2)[1]+'~c')};
        ChangeDOM.addChildren({'elType':'span','id':'arrowCont~'+list[i]},thisTitle);
            var thisArrow = document.getElementById('arrowCont~'+list[i]);
            thisArrow.style.float = 'left';
            thisArrow.style.width = '30px';
            ChangeDOM.addChildren({'elType':'img','id':'arrow~'+list[i]+'~c','src':'/images/support/arrowClose.jpg','border':'0'},thisArrow);
    ChangeDOM.addChildren({'elType':'div', 'id':'tabs~'+list[i]},this.displaySupport);//tabs container
        var tabContainer = document.getElementById('tabs~'+list[i]);
        tabContainer.style.borderBottom = '5px #35383c solid';
        tabContainer.style.paddingTop = '5px';
        tabContainer.style.backgroundColor = '#151515';
        tabContainer.style.marginTop = '10px';
    ChangeDOM.addChildren({'elType':'div', 'id':'content~'+list[i]},this.displaySupport);//contentContainer
        var contentContainer = document.getElementById('content~'+list[i]);
        contentContainer.style.display = 'none';
        contentContainer.style.overflow = 'hidden';
    for(var j=1;j<5;j++){
        this.buildTab(j,tabNames[j],list[i]);
        this.setContent(j,list[i],contentContainer);
    };

顺便说一句... ChangeDOM 类是我创建的用于操作 DOM 的自定义类。这段代码在下面...

//custom utility to change the DOM
    //adds children to given node 
    //"keys" format  - {"['elType'] or [element attribute] or     ['text']":"[element type] or [attribute property] or [actual text],"":""...}
function ChangeDOM(){}
ChangeDOM.prototype.addChildren = function(keys,parentNodeObject){
//alert(parentNodeObject.id);
var elName = '';
if (keys["elType"] == 'input'){ 
    if (keys["type"] == 'radio'){
        try{
            elName = document.createElement('<input type="radio" name="fldID" />');  
        }catch(err){  
            elName = document.createElement('input'); 
        }
        try{elName.setAttribute('type','radio');}catch(err){elName.type = 'radio'};
        elName.setAttribute('name','fldID'); 
    }
}
if(elName == '')elName=document.createElement(keys["elType"]);
for(var key in keys){
    if(key != "elType"){
        switch(key){
            case('type'):   if (keys[key] == 'radio')break;
                            elName.type = keys[key];
                            break;
            case('name'):   elName.name = keys[key];
                            break;
            case('value'):  elName.value = keys[key];
                            break;
            case('id'):     elName.id = keys[key];
                            break;
            case('href'):   elName.href = keys[key];
                            break;
            default:        if(key !='text')elName.setAttribute(key,keys[key]);
                            break;
        }
    }
}
parentNodeObject.appendChild(elName);
if(keys['text']){
    if(keys["elType"] == "input"){
        this.addChildren({'text':keys['text']},parentNodeObject);
    }else{
        var txt=document.createTextNode(keys[key]);
        elName.appendChild(txt);
    }
}
return;
}
    //clears all children from given node
ChangeDOM.prototype.clearChildren = function(parentNodeObject){
        if(parentNodeObject.childNodes){
            var nodechildren = new Array();
            nodechildren = parentNodeObject.childNodes;
            if(nodechildren.length>0)for(i=0;nodechildren.length;i++)parentNodeObject.removeChild(parentNodeObject.lastChild);
        }
        return;
    }
    //updates text for a given node
ChangeDOM.prototype.updateText = function(newText,parentNodeObject){
        this.clearChildren(parentNodeObject);
        this.addChildren({'text':newText},parentNodeObject);
    }

【问题讨论】：

这就是人们使用框架的原因。让其他人担心如何让事情在多个浏览器上运行。
您是否考虑过使用 WebKit 网络检查器/调试器来查看发生了什么？
"...除非世界发生了变化，否则 IE 和 FF 就是您所需要的，真的，用于兼容性测试..." - 世界没有改变：事情从未改变就是这样工作的。当然，除非“兼容性测试”是指“与 IE 和 FF 的兼容性”...
谁告诉过你不需要测试 Webkit（即 Chrome、Safari 等）？？？
就像大卫说的......你应该使用像jQuery这样的框架来避免这样的问题。话虽如此，在 JSFiddle.net 中弹出一个演示，这样如果你真的卡住了，我们可以调试它。

标签： javascript css google-chrome safari cross-browser

【解决方案1】：

我找到了解决方案。这不是波浪号或坏 .js。这就是我的想法...... css。一旦我开始指定我的脚本正在构建的框的宽度，所有这些都结合在一起了。其他浏览器似乎在假设宽度。

感谢大家的意见。

另一方面，虽然我确实喜欢 JQuery 并且不时使用它，但我更喜欢 JS 的原始功能。即使使用 JQuery，我仍然必须指定宽度才能使其正确。

【讨论】：