Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   IE8 и баг с display:none для td (ячейки таблицы) (https://javascript.ru/forum/events/31783-ie8-i-bag-s-display-none-dlya-td-yachejjki-tablicy.html)

SegaMega 20.09.2012 16:50

IE8 и баг с display:none для td (ячейки таблицы)
 
Доброго времени суток всем. Сразу скажу, что написать этот топик меня заставило отчаяние, потому что весь нэт перерыл, НО ни то, чтоб ответов не нашёл по данной проблеме, а не нашёл подходящего решения ((

Суть проблемы:
Есть (например) таблица из 5 строк 3 столбцов (в реале конечно больше и того и другого), верстка ниже. Есть 3 переключателя, каждый из которых скрывает соответствующий столбец (как именно - опять же ниже).

В соответствии с моей вёрсткой (см. стили) все 3 столбика должны растягиваться по ширине (!) всей таблицы, и после клика на каком-нить переключателе и скрытия столбика, оставшиеся должны также растягиваться и занимать место скрытого столбца, что и происходит в:
  • IE 7,
  • Opera 9+
  • FireFox 3+

НО ни в IE 8 :blink:

Кроме того, если вручную при верстке HTML добавить к ячейкам столбика, который хотим скрыть, style="display:none" или class="no" (в стилях прописан как td.no {display:none;}, то 2 оставшихся столбика растягиваются как надо в том же самом IE 8

Если IE 8 в режиме совместимости с IE 7 - всё путём ))

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> использовал как вариант решения траблы -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>javascript</title>
<style type="text/css">
    /* эти стили взяты и минимизированы с одного из моих сайтов
    но суть проблемы 100% ни в них, поэтому даже и не копайтесь */
    body { margin:0px; }
    html,body { height:100%; margin:0px; padding:0px; }
    html>body { font-size: small; }
    #container { width:1024px; max-width:1024px; position:relative; margin:0 auto; padding:0; min-height:100%; border:1px solid #ccc;}
    * html #container{ height:100%; }

    /* стили для видимых ячеек: длина должна быть указана обязательно - требование к сайту )) */
    td { width:75px; border:1px solid #CCCCCC;}

    /* юзаем как вариант скрытия ячеек, он же и для демонстрации того, что без JavaScript в IE8 всё ОК*/
    td.no { display:none; }

    /* таблица с флажками - тоже формальность, можно и в div*/
    #table_filter {background: #CCCCFF;}

    /* это важный стиль для нашей таблицы*/
    #table {width:1024px; table-layout:fixed; max-width:1024px;}
</style>

<script type="text/javascript">
function toggle_column(column_nr) {
    var table = document.getElementById('table');
    var rows = table.getElementsByTagName('tr');

    for (var row=0; row<rows.length;row++) {
    cels = rows[row].getElementsByTagName('td');
    /* вот здесь что только не пробовал: разные варианты...*/
    cels[column_nr].className="no";
    //cels[column_nr].style.display="none";
    //cels[column_nr].setAttribute('style','display:none;');
        }
    }
</script>

</head>
<body>
<div id="container">
    <table border="1" id="table_filter">
    <tr>
        <td><input name="column_0" type="checkbox" value="0" onClick="toggle_column(this.value);" checked />thirst</td>
        <td><input name="column_1" type="checkbox" value="1" onClick="toggle_column(this.value);" checked />second</td>
        <td><input name="column_2" type="checkbox" value="2" onClick="toggle_column(this.value);" checked />third</td>
    </tr>
    </table>

    <table border="0" id="table">
    <tr>
        <td>0 1</td>
        <td>0 2</td>
        <td>0 3</td>
        <td class="no">0 4</td>
    </tr>
    <tr>
        <td>1 1</td>
        <td>1 2</td>
        <td>1 3</td>
        <td class="no">1 4</td>
    </tr>
    <tr>
        <td>2 1</td>
        <td>2 2</td>
        <td>2 3</td>
        <td class="no">2 4</td>
    </tr>
    <tr>
        <td>3 1</td>
        <td>3 2</td>
        <td>3 3</td>
        <td class="no">3 4</td>
    </tr>
    <tr>
        <td>4 1</td>
        <td>4 2</td>
        <td>4 3</td>
        <td class="no">4 4</td>
    </tr>
    <tr>
        <td>5 1</td>
        <td>5 2</td>
        <td>5 3</td>
        <td class="no">5 4</td>
    </tr>
    </table>
</div>
</body>
</html>


Вот такая вот фигня (( Сразу добавлю, что ссылки на "схожую проблему" скидывать не нужно. Есть конкретный баг IE8 - напишите плз конкретное решение, если у Вас оно найдётся :victory:

Возможно проблема и в <!DOCTYPE >, и в #table {width:1024px; table-layout:fixed; max-width:1024px;}, и в том, что ширина задана конкретно для всех ячеек... но перепробовал уже что только можно!!! И пришёл к выводу (с учётом всех нэтовских топиков с Хабра, СтэкОверфлоу, данного форума), что всё-таки баг в кривом динамическом изменении display:none у нашего любимого Ослика 8

SegaMega 21.09.2012 06:56

Извиняюсь конечно, но или реально пока никто не знает как это исправить или ответ настолько элементарный, что просто тему даже и не рассматривают как серьёзную :-? А может я и ни в нужном разделе эту тему написал... на всякий случай опубликовал здесь: http://javascript.ru/forum/showthread.php?p=205666

Модератор, удалите плз из ненужного раздела форума тему ;)


Часовой пояс GMT +3, время: 14:10.