Ячейки таблицы IE7, сделанные CSS невидимыми, нельзя сделать видимыми при последующих изменениях класса (??) - PullRequest
Новая
       12

Ячейки таблицы IE7, сделанные CSS невидимыми, нельзя сделать видимыми при последующих изменениях класса (??)

5 голосов
/ 20 июня 2010

Вот два тестовых файла:

http://gutfullofbeer.net/good-table.html

http://gutfullofbeer.net/bad-table.html

Разметка на этих двух страницах практически одинакова,Там есть таблица с двумя столбцами.Элементам <th> и <td> одного столбца (второго) присвоен класс "мусор".

На странице "хорошо", когда вы загрузите ее, вы увидите, что флажок не отмеченна вершине.Если вы установите флажок, второй столбец должен исчезнуть.Если вы снимите флажок, второй столбец вернется.На «плохой» странице флажок начинает проверяться.Снятие отметки не имеет никакого эффекта в IE7, хотя оно работает в других браузерах, которые не обладают фундаментальным злом.

Флажок привязан к небольшой подпрограмме Javascript, которая просто добавляет или удаляет класс «компактный» из <table> тег.Есть таблица стилей, которая включает это: 

table.compact th.junk, table.compact td.junk {
  display: none;
}

Таким образом, то, что должно произойти, это то, что происходит на «хорошей» странице.Однако, похоже, что в IE7 (возможно, и в 6) элементы таблицы начинаются с так, что когда изначально визуализируется, они стилизованы как невидимые, их никогда не увидят, независимо отпоследующих изменений в DOM, которые приведут в действие новые правила стиля и сделают их видимыми.(Похоже, это проблема с <table> деталями; я использую тот же механизм в другом месте с другими элементами, и все они работают нормально.)

Итак, вопрос: кто-нибудь знает о каком-то взломе- однако отвратительно - что можно использовать, чтобы обойти это идиотское поведение?Очевидно, что я мог бы попытаться организовать IE7 для запуска своих представлений с соответствующим набором переключателей, чтобы ячейки таблицы были видны, но в моем случае это происходит вокруг таблицы, которая создается как ответ AJAX, и поэтому это будет большойбеспорядок я бы предпочел избежать.(Таблица на самом деле тоже таблица; это отображение табличной информации, а не взлом макета.)

Я гуглил и ничего не нашел, что не должно удивлять, если учесть, сколькохиты, которые вы получаете из поисков «Ошибка макета IE7».

Ответы [ 2 ]

2 голосов
/ 20 июня 2010

Это ошибка рендеринга.IE6 / 7 не использует правильную модель отображения таблицы.К сожалению, я не могу вспомнить конкретное имя / метку для этой конкретной ошибки, и я не могу найти авторские ресурсы, подтверждающие это.

По крайней мере, я нашел 2 способа CSS исправить это.

  1. Самый простой, используйте visibility: hidden; вместо display: none;.К сожалению, это не очень хорошо работает, если у вас есть больше столбцов после столбца, подлежащего переключению, или есть граница таблицы.Это все еще оставляет место.Добавление position: absolute; к .junk устраняет эту проблему в FF, но вы возвращаетесь к той же проблеме рендеринга в IE.

  2. Хак, который злоупотребляет ошибочной способностью IE применять стили для<col>. 

    <!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(function() {
                $('#click').click(function() {
                    $('table').toggleClass('compact', this.checked);
                });
            });
        </script>
        <style>
            table.compact .junk { display: none; }
        </style>
        <!--[if lte IE 7]>
        <style>
            table.compact .junk { display: block; }
            table.compact col.junk { display: none; }
        </style>
        <![endif]-->
    </head>
    <body>
        <input type="checkbox" id="click" checked>
        <table class="compact">
            <col />
            <col class="junk" />
            <tr>
                <th>Hello</th>
                <th class="junk">World</th>
            </tr>
            <tr>
                <td>Foo</td>
                <td class="junk">Bar</td>
            </tr>
            <tr>
                <td>Foo</td>
                <td class="junk">Bar</td>
            </tr>
        </table>
    </body>
</html>

Кроме того, вы также можете просто переключать элементы фактического интереса в jQuery: 

$(function() {
    $('#click').click(function() {
        $('table.compact .junk').toggle(!this.checked);
    });
});
2 голосов
/ 20 июня 2010

У меня не установлен IE 7, но это была та же проблема с IE 6. Вот что я сделал, чтобы это исправить: 

$(function() {
  $('#click').click(function() {
    $(".compact th+th,.compact td+td").toggleClass('junk',this.checked);
  });
});

Проблема была с вашим селектором. Переключение на compact не добавит видимости к junk.

...