6

私はこのコードを持っています:

<tr>
    <td width="40%" align="left" class="form_cell">
    <span class="sub_header">Update or Delete</span><br />
    Please select whether you would like us to update this contacts details, or delete them from the system.
    </td>

    <td width="60%" align="left" class="form_cell">
    [class=form__parser func=updateDetails__updel(150.$update_or_delete$.true)]
    </td>
</tr>
<tr>
    <td width="100%" align="left" colspan="2" id="ammend_contact_details" style="display: none;">
        <table border="0" cellspacing="0" cellpadding="0" width="100%" align="left">
            <tr>
                <td width="40%" align="left" class="form_cell">
                <span class="sub_header">New Title</span><br />
                            Please enter the contacts new title, IE Mr, Mrs, Dr, Miss, Ms
                </td>

                <td width="60%" align="left" class="form_cell">
                <input type="text" name="update_contact_title" class="input" size="48" maxlength="6" value="$update_contact_title$" />
                </td>
            </tr>
        </table>
    </td>
</tr>

で始まるコード[class=form__parser...]は、ドロップダウン リストを作成します。いずれかのオプションをクリックすると、その下のセル ( ID ammend_contact_details) が表示されます。それ以外の場合は非表示になります。

このページの Web サイト アドレスはhttp://www.westlandstc.com/index.php?plid=6#eyJwbGlkIjoiNTkiLCJjbGlkIjoiNDQ2Iiwic2NsaWQiOiJudWxsIiwiZHluYW0iOiJudWxsIiwiYXBwSWQiOiJudWxsIn0=で、問題の要素はページの一番下にあります。

問題は、このcolspan属性が Internet Explorer では正常に機能することです (驚き) が、Chrome では、2 つの親列に分散されるはずのすべてのコンテンツが 1 列目にしか入りません。

バグをさらに絞り込みましたstyle="display: none"。属性を削除すると、正常に機能します。表示スタイルまたは表示スタイルを変更しようとするたびに、Chrome はすべてを最初の列に戻します。

また、2列にまたがるセルの背景色を赤にしてみました。Internet Explorer では、これも期待どおりに機能します。クロムでは、背景色は表示されません。

これを修正する方法はありますか？

4

4 に答える 4

10

それを表示するために「display」プロパティを何に設定していますか? iirc 'display:table-cell' (または同様のもの - 正確な値を覚えていない) を使用して、chrome がそれをテーブル セルとして扱うようにする必要があります。

于 2012-09-21T09:33:33.547 に答える
3

style.display=''

クロムで私のために働きます。

'display:table-cell'

ではない

于 2013-07-09T05:08:20.983 に答える
2

にCSSプロパティdisplay:inlineを追加するのではなく<td>、何らかの理由でIEは満足し、Chromeは満足しません。JavaScriptを更新して、display:noneスタイルを削除し、ブラウザーのデフォルトを有効display:table-cellにします。

onchangeメソッドでは、次の<select name="update_or_delete">ようになります。

if(this.value=='Update') { 
  document.getElementById('ammend_contact_details').style.display='';
} else { 
  document.getElementById('ammend_contact_details').style.display='none';
}
于 2012-09-21T09:41:43.167 に答える