Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2012, 16:50
Интересующийся
Отправить личное сообщение для SegaMega Посмотреть профиль Найти все сообщения от SegaMega
 
Регистрация: 20.09.2012
Сообщений: 16

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

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

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

НО ни в IE 8

Кроме того, если вручную при верстке 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 - напишите плз конкретное решение, если у Вас оно найдётся

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

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

Модератор, удалите плз из ненужного раздела форума тему
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кнопка для выбора файл,как исправить баг? phenom Элементы интерфейса 1 07.04.2011 18:17
Opera/IE баг с очередью обработки события несколькими элементами (напр onmouseover) no. Events/DOM/Window 8 08.03.2009 04:55
onmouseover отрабатывает по разному для одинаковых ячеек таблицы ilshat Events/DOM/Window 2 11.02.2009 12:25
Привязка картинки к углу ячейки таблицы! Помогите с кодом! Alexofer Общие вопросы Javascript 6 31.12.2008 00:14
Размер ячейки использовать для определения размера рисунка art_em Общие вопросы Javascript 2 20.11.2008 11:27