visibility: collapse в FF не работает?!

fran · January 29, 2008

Подскажите люди добрые .... в чем может быть проблема. Скорее всего ? понимаю что в голове ? но всеже без подсказки уже не могу

Вобщем пытаюсь скрыть ячейки ... что то типа display: none .... нужно чтобы крос-браузерно, как следствие для FF (а здесь вопрос именно в нем) смотрю в стороно visibility как и обещают многие доки.

Вот он (ниже) небольшой пример кода(сама задача несколько обширнее), который почему то отказывается работать в FF 2.0.0.11

Вобщем результат его работы (при попытке скрыть ячейки) в этом браузере ? ячейки перестают отображаться, однако выделенное под них ранее пространство остается не поделенным между соседними ячейками (так как мне кажется логичным этот результат).

Вот вобщем то и вопрос ? почему и как бороться?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 </head>
 <body>
 <table width="70%" border="1">
 <tr>
 <td>
 1
 </td>
 <td id="id1">
 2
 </td>
 <td id="id2">
 3
 </td>
 <td>
 4
 </td>
 </tr>
 </table>
 <script type="text/javascript">
 function hide() {
 document.getElementById('id1').style.visibility = 'collapse';
 document.getElementById('id2').style.visibility = 'collapse';
 }

 function show() {
 document.getElementById('id1').style.visibility = 'visible';
 document.getElementById('id2').style.visibility = 'visible';
 }
 </script>
 <input type="button" value="1" onclick="hide()" />
 <input type="button" value="2" onclick="show()" />
 </body>
</html>

maddogrts · January 30, 2008

А разьве display: none не "крос-браузерно"?

Denton McLeod · January 31, 2008

выделенное под них ранее пространство остается не поделенным между соседними ячейками (так как мне кажется логичным этот результат).

visibility управляет именно видимостью элемента. место он как занимал так и будет

display - его отображаемость

fran · January 31, 2008

Спасибо, за ответы. Между тем все еще не могу реализовать то что задумал ... а именно скрыть две ячейки идущие подряд (как в примере) + чтобы пространство из под них распределилось между соседями. Так чтобы это работало в FireFox на ряду с другими браузерами. Не могли бы помочь примером пожалуйста? .... Если речь идет о возможности использовать display - то научите пожалуйста - как воспользоваться верно этим свойством, чтобы это работало в FireFox.

Заранее спасибо.

nvgudz · February 1, 2008

Эм, проблема ясна.

'collapse' для скрипта тож непонятен, как недопустимый аргумент.

А ФФ четко и прямо понимает игру display ='none' - display ='block'.

Предлагаю решение с определением ИЕ

quot;-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
</head>
 <body>
 <table width="70%" border="1">
 <tr>
 <td>
 1
 </td>
 <td class="dd" id="id1">
 2
 </td>
 <td class="dd" id="id2">
 3
 </td>
 <td>
 4
 </td>
 </tr>
 </table>

 <script type="text/javascript">
 var ua = navigator.userAgent.toLowerCase();
 var isIE = ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) ); 

 function hide() {
 document.getElementById('id1').style.display = 'none';
 document.getElementById('id2').style.display = 'none';
 }
 function show() {
 var displayState = 'block';
 if(!isIE)
 displayState = 'table-cell';
 document.getElementById('id1').style.display = displayState;
 document.getElementById('id2').style.display = displayState;
 }
 </script>
 <input type="button" value="1" onclick="hide()" />
 <input type="button" value="2" onclick="show()" />
 </body>
</html>

Прошу сильно не судить, я по java-скриптам не сильно...

Но работает в ФФ, Опере, ИЕ (от 5 до 7), Сафари, Макстоне

yopopt · February 1, 2008

Можно сделать проще. Без проверки браузера. Для этого вместо установки свойству display значения block; просто сбрасывайте его(""). Можно упростить так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
</head>
 <body>
 <table width="70%" border="1">
 <tr>
 <td>
 1
 </td>
 <td class="dd" id="id1">
 2
 </td>
 <td class="dd" id="id2">
 3
 </td>
 <td>
 4
 </td>
 </tr>
 </table>

 <script type="text/javascript">
		function showhide(t) {
			for(i=1; i<=2; i++) {
				document.getElementById('id' + i).style.display = t == 'show' ? "" : "none";
			}
 	}
 </script>
 <input type="button" value="1" onclick="showhide('show')" />
 <input type="button" value="2" onclick="showhide('hide')" />
 </body>
</html>

Sign In

visibility: collapse в FF не работает?!

Question

fran

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

Denton McLeod

Link to comment

Share on other sites

fran

Link to comment

Share on other sites

nvgudz

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information