нежелательные строки в таблице при сворачивании tr в IE - PullRequest
Новая
       350

нежелательные строки в таблице при сворачивании tr в IE

1 голос
/ 14 января 2012

У меня есть таблица с развернутым / свернутым javascript, действующим на значение класса, присвоенное tr Смотрите ниже HTML-код. Все это прекрасно работает в Chrome, но в IE, когда я раскрываю и сворачиваю строку www, я получаю дополнительные нежелательные строки в строках xxx и zzz. Линии выглядят так, как будто они являются границами (см. Определение стиля границы CSS). Похоже, что границы свернутых и скрытых строк по-прежнему отображаются (строки, не являющиеся кнопками, немного ниже, чем строки кнопок, по-видимому, из-за стандартного заполнения кнопок и ширины границ).

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>

Ответы [ 2 ]

1 голос
/ 15 января 2012

Вместо установки дисплея на "table-row" установите его на "", чтобы вернуться к поведению по умолчанию. Старые версии IE не поддерживают table-row и требуют block.

Если ваш CSS переопределяет значение по умолчанию (т. Е. Если вы использовали его, чтобы скрыть класс строк с самого начала), попробуйте: 

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

И добавьте DOCTYPE, как сказал wsanville.

1 голос
/ 15 января 2012

Вам необходимо указать doctype в качестве первой строки в вашей разметке.Без doctype IE будет отображать в режиме quirks , который по сути является механизмом рендеринга 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%;
}
...