0

FF、Chromeなどで問題ないIEに問題があります...

たとえば、デバッグ用に左側を空にした2列のレイアウトがあります。右側には、その上に並べ替え可能なオプションを備えたテーブルに結果の長いリストがあります。

この並べ替え可能なオプション セクションには、動的に生成されるオプションを含む選択ボックスがあります。$(this).html(...) を介して更新すると、コンテンツは正常に更新されますが、attr() で無効のステータスを変更すると、その下の結果のスタイリングが壊れます...ページの高さのカットが短くなります結果の表示をオフにします。ある種の画像またはコンテンツを含む左側の列に高さを入れると、その左側の列のコンテンツの最後まで高さが下がります。

右側の列にあるものの意味を失ったかのように、実際にその列にあるものを表示しないように何らかの理由で再レンダリングします。

jQueryでこれを修正する方法、またはIEのCSS/HTMLで何らかの回避策を強制する方法の解決策を誰かが持っていますか? 本当に迷惑で、完全にアイデアがありません:(

いくつかのコードで更新するだけです：

HTML

<div id="ctn"><div id="ctn_wrp"><div id="ctn_cnt">
<div class="col_l180wrp">

<div class="lay_l">
<div class="col_l180hdr"></div>

</div>

<div class="lay_mr">

<div style="height:66px;margin:0px 0px 10px 0px;background:url(/images/search/bg-pp-search.gif) no-repeat top left;">
<div style="float:left;width:504px;height:66px;font-size:11px;">

<table cellpadding="4" cellspacing="4">
<tr style="font-size:11px;color:#FFF;font-weight:bold;">
<td>Manufacturer</td>
<td>Model</td>
<td>Network</td>
<td>Phone cost</td>

</tr>
<tr>
<td>
<select id="manufacturer" name="manufacturer">
  <option value="">Any</option>
  <option value="18">Apple</option>
  <option value="8">Blackberry</option>
  <option value="14">HTC</option>
  <option value="5">LG</option>
  <option value="2">Motorola</option>
  <option value="1">Nokia</option>
  <option value="15">O2</option>
  <option value="3" selected="selected">Samsung</option>
  <option value="24">Sonim</option>
  <option value="4">Sony Ericsson</option>
  <option value="19">Three</option>
</select>
</td>

<td colspan="3">
  <select id="models" name="models" disabled="disabled">
    <option value="">Any</option>
  </select>
</td>
</tr> 
</table>

</div>
<div style="float:left;width:246px;height:66px;">
<input type="image" src="/images/search/bt-compare.gif" id="submit_button" name="submit" value="Submit" alt="Submit" title="Submit" style="margin:8px 0px 0px 12px;" /> 
</div>
<div class="sp"></div>
</div>

</form>
<div class="sp"></div>

<div class="split_l560">

<div id="results">


</div>

</div>

<div class="split_r180">
</div>

</div>
<div class="sp"></div>

</div>
<div class="col_l180ftr"></div>
<script type="text/javascript">
var premanufacturer=3;
var premodel=522;
</script>

</div></div></div>

通常、結果テーブルは div#results に入りますが、今のところ削除しました。

レイアウトはメインの左側の列 (subnav) で、これは 'layl' であり、'lay_mr' は右側のメインの列です。上部に検索フィルターがあり、その下に 2 つの列に分割され、その 2 つのうちの左側に結果が表示されます。コンテンツが 'layl' または 'split_r180' に配置されている場合、結果の表はこれら 2 つの列のコンテンツの高さに表示されます。現在、iveはそれらを空にしました。

select#models でトリガー/イベント/実行が発生すると壊れます。これはjQueryによって処理されています。

コールバックを実行し、.html を使用してオプションを更新します。attr の変更に達すると、高さが壊れます。

$("select#models").html(options);
$("select#models").attr("disabled","");

私も removeAttr() を試してみましたが、喜びはありませんでした。本当に困った！:-/ 私が言うように、FF と Chrome ではまったく問題ありません! 典型的な IE ですよね？:*)

助けてくれてありがとう、みんな大歓迎です。

4

1 に答える 1

1

いわば作業を倍増させるような方法でバグを修正することができました。hide() と show() を再度 #results にすると、IE はそれを再レンダリングし、その高さを再認識させます。面倒ですが、問題は解決します:-/

于 2009-06-15T20:50:41.857 に答える