请问innerHTML在FF下的问题如何解决？

如题，在IE下能正常输出[-](说明：[-]为打开状态，[+]为关闭状态)，在FF下就不起作用了。<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Demo_Default1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CSS制作滑动折叠的文字效果 by okajax.com</title>
    <style type="text/css">
        <!
        -- body, div, ul, li, p, h1, h2
        {
            margin: 0;
            padding: 0;
            border: 0;
            background: #FAFAFA;
            font-family: Arial, Helvetica, sans-serif, "宋体";
        }
        body
        {
            text-align: center;
            font-size: 12px;
        }
        li
        {
            list-style: none;
        }
        .rolinList
        {
            width: 402px;
            height: auto;
            margin: 20px auto 0 auto;
            text-align: left;
        }
        .rolinList li
        {
            margin-bottom: 1px;
            border: 1px solid #DADADA;
        }
        .rolinList li h2
        {
            width: 380px;
            height: 40px;
            background: #fff;
            font-size: 14px;
            line-height: 40px;
            padding-left: 20px;
            color: #333;
            cursor: pointer;
        }
        .content
        {
            height: 150px;
            width: 400px;
            background: #fff;
            background: #FAFAFA;
        }
        .content p
        {
            margin: 12px;
        }
        -- ></style>    <script type="text/javascript">
        //<![CDATA[
        window.onload = function() { rolinTab("rolin");}        function rolinTab(obj) {
            var list = $(obj).getElementsByTagName("LI");
            var state = { show: false, hidden: false, showObj: false };            for (var i = 0; i < list.length; i++) {
                var tmp = new rolinItem(list[i], state);
                if (i == 0) tmp.pShow();
            }
        }
        function rolinItem(obj, state) {
            //var speed = 0.0666;
            var speed = 0.2;
            var range = 1;
            var interval;
            var tarH;
            var tar = this;
            var head = getFirstChild(obj);
            var content = getNextChild(head);            var isOpen = false;
            this.pHidden = function() {
                if (isOpen) hidden();
            }
            this.pShow = show;
            var baseH = content.offsetHeight;
            content.style.display = "none";
            var isOpen = false;
            head.onmouseover = function() {
                this.style.background = "#EFEFEF";
            }
            head.onmouseout = mouseout;
            /*add*/
            var objSpan = head.firstChild;
            /*end add*/            head.onclick = function() {
                this.style.background = "#EFEFEF";
                if (!state.show && !state.hidden) {
                    if (!isOpen) {
                        head.onmouseout = null;
                        show();
                        
                    } else {
                        hidden();
                    }
                }
            }
            function mouseout() {
                this.style.background = "#FFF"
            }
            function show() {
                head.style.borderBottom = "1px solid #DADADA";
                state.show = true;
                if (state.openObj && state.openObj != tar) {
                    state.openObj.pHidden();
                }
                content.style.height = "0px";
                content.style.display = "block";
                content.style.overflow = "hidden";
                /*add*/
                objSpan.innerHTML = "[-]";
                /*endadd*/
                state.openObj = tar;
                tarH = baseH;
                interval = setInterval(move, 10);
            }
            function showS() {
                isOpen = true;
                state.show = false;
            }
            function hidden() {
                state.hidden = true;
                tarH = 0;
                interval = setInterval(move, 10);
            }
            function hiddenS() {
                head.style.borderBottom = "none";
                head.onmouseout = mouseout;
                head.onmouseout();
                content.style.display = "none";
                /*add*/
                objSpan.innerHTML = "[+]";
                /*endadd*/
                isOpen = false;
                state.hidden = false;
            }
            function move() {
                var dist = (tarH - content.style.height.pxToNum()) * speed;
                if (Math.abs(dist) < 1) dist = dist > 0 ? 1 : -1;
                content.style.height = (content.style.height.pxToNum() + dist) + "px";
                if (Math.abs(content.style.height.pxToNum() - tarH) <= range) {
                    clearInterval(interval);
                    content.style.height = tarH + "px";
                    if (tarH != 0) {
                        showS()
                    } else {
                        hiddenS();
                    }
                }
            }
        }
        var $ = function($) { return document.getElementById($) };
        String.prototype.pxToNum = function() { return Number(this.replace("px", "")) }
        function getFirstChild(obj) {
            var result = obj.firstChild;
            while (!result.tagName) {
                result = result.nextSibling;
            }
            return result;
        }
        function getNextChild(obj) {
            var result = obj.nextSibling;
            while (!result.tagName) {
                result = result.nextSibling;
            }
            return result;
        }        //]]>
    </script></head>
<body>
    <form id="form1" runat="server" target="_blank" action="Default2.aspx">
    <div>
        <ul class="rolinList" id="rolin">
            <li>
                <h2>
                    <span>[+]</span>Ajax中国</h2>
                <div class="content">
                    <p>
                        域名:http://www.okajax.com<br />
                        <br />
                        ajax技术论坛http://bbs.okajax.com<br />
                        ajax家园http://blog.okajax.com<br />
                        Ajax在线演示<br />
                        Ajax因创意而精彩</p>
                </div>
            </li>
            <li>
                <h2>
                    <span>[+]</span>帝王槌</h2>
                <div class="content">
                    <p>
                        立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
                        问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.
                        <br />
                        须发苍,气轩昂,三尺银狼,破风动八方.
                        <br />
                        依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!</p>
                </div>
            </li>
            <li>
                <h2>
                    <span>[+]</span>玉女枪法</h2>
                <div class="content">
                    <p>
                        曾经有个梦想：驰骋江湖，快意恩仇。<br />
                        曾经有份愿望：千里追凶，十步溅血。<br />
                        曾经有腔豪情：奇功盖世，名冠武林。<br />
                        曾经有种期盼：烛影摇红，衣袖添香。</p>
                </div>
            </li>
            <li>
                <h2>
                    <span>[+]</span>黑沙刚体</h2>
                <div class="content">
                    <p>
                        赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
                        <br />
                        十步杀一人，千里不留行。事了拂衣去，深藏身与名。
                        <br />
                        闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。
                        <br />
                        三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。
                        <br />
                        救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。
                        <br />
                        纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。</p>
                </div>
            </li>
            <li>
                <h2>
                    <span>[+]</span>不羁浪人枪</h2>
                <div class="content">
                    <p>
                        素手相牵，斜辉入眼帘，一轮逍遥自在间，醉了山水闲。<br />
                        沙漠绿水涟，鱼游浅底，明眸一水天。<br />
                        爱在村友相谈，开心点点，笑语连连，率性夜无眠。<br />
                        月在西边，风乱星寒，辗转醇香旧事，蛾儿曼舞灯前。</p>
                </div>
            </li>
            <li>
                <h2>
                    <span>[+]</span>雾水掌</h2>
                <div class="content">
                    <p>
                        蹄影善奔,如幻如魔,其皮传世,绝学再现,<br />
                        又有谁在这残阳道中追逐它的身影...
                    </p>
                </div>
            </li>
        </ul>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    var objSpan = head.firstChild;
    var objSpan = head.getElementsByTagName("span")[0];
      

  2.   

    IE会忽略节点间生成的空白文本节点，而FF不会这样做。
    因此，在取得元素时需要判断元素的节点类型（nodeType）。
    function getFirstChildElement(obj) 
    {
        var el = obj.firstChild;
        while (el.nodeType != 1)  el=el.nextSibling;
        return el;
    }
      

  3.   

    innerHTML不兼容FF的。
    写一个函数吧。可以通用FF。
      

  4.   

    别听楼上的
    innerHTML兼容FF的，是outerHTML不兼容FF 至于你的代码，出错的地方不在innerHTML