Свойство display: none для строк в таблице под IE8
Тут несколько раз проскакивали темы, что имеются проблемы со свойством display: table-row или none.
Интересной наблюдение: свойство прописанное в CSS и прямо в теге ведут себя по разному в IE. Подробнее. Есть таблица, в которой из нескольких строк должна показываться только 1, в зависимоси от radio-button. Все строки выводятся с display: none, а потом одна из них js-функцией устанавливается в display: table-row. (Кривовато написано, но смысл, я надеюсь, понятен). Так вот если написать <tr ... class='invisible'> а в CSS написать .invisible { display: none; } то в IE8 строки так и не появляются ( после document.getElementById(new_tr_id).style.display = "table-row"; ) а если написать <tr ... style="display: none;"> то все работает. Почему не работает - не понимаю. PS. в остальных доступных браузерах работает всегда. |
Цитата:
document.getElementById('new_tr_id').style.display = "" |
Просто тест - встроенный стиль vs глобальный
Сделал просто тест.
Так - работает: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test-2</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script type="text/javascript"> var old_tr_id = 'r0'; function src_select(new_tr_id) { if (new_tr_id != 'r0') { document.getElementById(new_tr_id).style.display = "table-row"; } if (old_tr_id != 'r0') { document.getElementById(old_tr_id).style.display = "none"; } old_tr_id = new_tr_id; } </script> </head> <body> <table> <tr><td>Radio</td><td> <input type=radio id=rb name=rb value='r1' onclick="src_select(this.value)">1 <input type=radio id=rb name=rb value='r2' onclick="src_select(this.value)">2 <input type=radio id=rb name=rb value='r3' onclick="src_select(this.value)">3 <input type=radio id=rb name=rb value='r0' onclick="src_select(this.value)" checked>0 </td></tr> <tr id=r1 style="display: none;"><td>1</td></tr> <tr id=r2 style="display: none;"><td>2</td></tr> <tr id=r3 style="display: none;"><td>3</td></tr> </table> </body> </html> -------------------------------------- А так - не работает. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test-1</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> .inv { display: none; } </style> <script type="text/javascript"> var old_tr_id = 'r0'; function src_select(new_tr_id) { if (new_tr_id != 'r0') { document.getElementById(new_tr_id).style.display = "table-row"; } if (old_tr_id != 'r0') { document.getElementById(old_tr_id).style.display = "none"; } old_tr_id = new_tr_id; } </script> </head> <body> <table> <tr><td>Radio</td><td> <input type=radio id=rb name=rb value='r1' onclick="src_select(this.value)">1 <input type=radio id=rb name=rb value='r2' onclick="src_select(this.value)">2 <input type=radio id=rb name=rb value='r3' onclick="src_select(this.value)">3 <input type=radio id=rb name=rb value='r0' onclick="src_select(this.value)" checked>0 </td></tr> <tr id=r1 class=inv><td>1</td></tr> <tr id=r2 class=inv><td>2</td></tr> <tr id=r3 class=inv><td>3</td></tr> </table> </body> </html> |
table-row & IE
table-row IE понимает.
Если изначально задать 'table-row' вместо 'none', то потом (после полного круга щелкания по кновке) все начинает работать. |
Цитата:
<!DOCTYPE html> <html> <head> <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> --> <style type="text/css"> .inv { display: none; } </style> <script type="text/javascript"> var old_tr_id = 'r0'; function src_select(new_tr_id) { if (new_tr_id != 'r0') { document.getElementById(new_tr_id).style.display = "table-row"; alert('показал '+new_tr_id) } if (old_tr_id != 'r0') { document.getElementById(old_tr_id).style.display = "none"; alert('спрятал '+old_tr_id) } old_tr_id = new_tr_id; } </script> </head> <body> <table> <tr> <td>Radio</td> <td> <input type=radio name=rb value='r1' onclick="src_select(this.value)">1 <input type=radio name=rb value='r2' onclick="src_select(this.value)">2 <input type=radio name=rb value='r3' onclick="src_select(this.value)">3 <input type=radio name=rb value='r0' onclick="src_select(this.value)" checked>0 </td> </tr> <tr id=r1 class=inv><td>1</td></tr> <tr id=r2 class=inv><td>2</td></tr> <tr id=r3 class=inv><td>3</td></tr> </table> </body> </html> </body> </html> |
Ну, не знаю что и сказать. У меня IE ни с глобальным стилем (как здесь), ни через файл не работает. А SeaMonkey, Chrome и Opera - работают.
Может, какого-нибудь update не хватает (или наоборот, лишний)... |
Цитата:
|
Пример работает.
Но при копировании ко мне на сервер - уже нет. IE 8.0.6001.19702 |
Цитата:
|
Дело все-таки в
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> :-( |
Часовой пояс GMT +3, время: 15:15. |