Question

我有一个表格，其中展开/折叠javascript作用于分配给tr的类值。见下面的html代码。这一切在Chrome中运行良好，但在IE中，当我展开然后折叠www行时，我在xxx和zzz行中得到了额外的不需要的行。这些线看起来像是边框（参见css td border-style definition）。看起来好像仍然显示了折叠和隐藏行的边框（非按钮行比按钮行略高，显然是因为标准按钮填充和边框宽度）。

screenprint from IE

为什么会这样，我该如何防止这种情况发生？

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Example</title>
      <style type="text/css">
body, p {
    background-color: white;
    font-family: Verdana;
    font-size: 10pt;
    font-style: normal;
    color: black;
    margin-bottom: 4.5pt;
    margin-top: 0pt;
}

table {
    border: solid black 1pt;
    border-collapse: collapse;
    padding: 0;
    border-spacing: 0;
}

th {
    background: rgb(255, 255, 153);
    border-style: solid;
    border-color: black;
    border-width: 1pt;
    padding: 0cm 5pt;
    color: black;
    font-family: Verdana;
        font-size: 10pt;
    font-style: normal;
    vertical-align: top;
}
td {
    border-style: dotted dotted none none;
    border-color: black;
    border-width: 1pt;
    padding: 0cm 5pt;
    color: black;
    font-style: normal;
    font-family: Verdana;
        font-size: 10pt;
    vertical-align: top;
    margin-bottom: 4.5pt;
    margin-top: 0pt;
}

input.buttonSeq {
    color: blue;
    background: ffffcc;
    border: none;
    margin-left:0pt;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 100%;
}

</style>
      <script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
    var trs = document.getElementsByTagName('tr');
    for (var i=0; i!=trs.length; i++) {
        if (trs[i].className == clss) {
            if (    trs[i].style.display == "none")
                {
                trs[i].style.display = "table-row"
                }
            else    {
                trs[i].style.display = "none"
                }
        }
    }
    return true;
}
</script>
      </head>
   <body>
      <br><br>
      <table style="table-layout:fixed word-break:break-all">
         <col width="120">
         <thead>
            <tr>
               <th>Element</th>
            </tr>
         </thead>
         <tbody>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
               </td>
            </tr>
            <tr style="display:none" class="www">
               <td>element1</td>
            </tr>
            <tr style="display:none" class="www">
               <td>element2</td>
            </tr>
            <tr style="display:none" class="www">
               <td>element3</td>
            </tr>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
               </td>
            </tr>
            <tr style="display:none" class="xxx">
               <td>element4</td>
            </tr>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
               </td>
            </tr>
            <tr style="display:none" class="zzz">
               <td>element5</td>
            </tr>
         </tbody>
      </table><br></body>
</html>

Answer 1

您需要指定doctype作为标记的第一行。如果没有doctype，IE将在quirks mode中呈现，这基本上是IE 5.5呈现引擎。 Quirks模式极大地影响了盒子模型和Javascript支持等等。

示例：

<!doctype html>

指定doctype将使您的示例像在Firefox中一样工作。

修改

灰色背景来自以下规则，这在技术上是错误的（在使用十六进制颜色时需要指定#符号：

input.buttonSeq { color: blue; background: ffffcc; /* change this to #ffffcc */ border: none; margin-left:0pt; margin-top: 0px; margin-bottom: 0px; font-size: 100%; }

Answer 2

不是将显示设置为"table-row"，而是将其设置为""，以便恢复默认行为。较早版本的IE不支持table-row，而是需要block。

如果您的CSS覆盖了默认值（例如，如果您使用它来从头开始隐藏一类行），请尝试：

try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}

并添加一个DOCTYPE，就像wsanville说的那样。

在IE中折叠tr时表中不需要的行

2 个答案: