可視性：隠された要約するとIE、クロムやサファリ

Question

の下で動作するようには思えない、 要件： データ存在移入テキスト とdivのない場合のデータ存在を隠すのdivが、全体的なテーブル垂直方向の高さを保持

実装する場合：

HTML：

<tr> 
    <td> 
    <div id= 'div_car_close_out' class='car_close_out'></div> 
    </td> 
</tr> 

CSS：

div.car_close_out { 
    border: 2px inset #D5D0D0; 
    text-align: left ; 
    overflow-y:scroll; 
    height:35px; 
    background-color: white; 
} 

のjavascript：

if (arr_task[0].CarClosedOutDate == " ") { 
    document.getElementById("div_car_close_out").style="visibility:hidden"; 
} else { 
    document.getElementById("div_car_close_out").innerHTML = arr_task[0].CarCloseOut; 
    document.getElementById("div_car_close_out").style="visibility:visible"; 
} 

これはしかしクローム、IEでFF で完璧に動作し、サファリのdiv要素が隠されていません。

可視性：折りたたみを使用することはできますが、全体的なテーブルの垂直サイズが縮小され、下の要素の配置が正しくありません。

私はこの一見単純な要件に対する解決策を見つけることができませんでした。どんな提案もできますか？

Answer 1

visibilityプロパティの可視値は、Chrome、Firefox、IE、Opera、Safariでサポートされています。

visibilitY:initialを使用できますが、IEではサポートされていません。

このプロパティと彼の可能性の値の詳細については、Developer Mozilla Referenceを参照してください。

Answer 2

問題は、非表示行には内容がないため、ブラウザにテキストが含まれている行よりも少ない量の垂直スペースが割り当てられることです。行が表示されているときにも同じことが起こるため、可視性とは何の関係もありません。

visibility: hidden;に変更するときは、まだコンテンツがあることを確認してください。プレースホルダが必要な場合は、 を入れます。

document.getElementById('button').onclick = function() { 
 
    document.getElementById("div_car_close_out").innerHTML = ' '; 
 
    document.getElementById("div_car_close_out").style = "visibility:hidden"; 
 
};

<table> 
 
    <tr> 
 
    <td>Row 1</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div id='div_car_close_out' class='car_close_out'>Row 2</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row 3</td> 
 
    </tr> 
 
</table> 
 
<button id="button"> 
 
    Hide row 2 
 
</button>