JQuery:IE 样式错误/Select attr() 更改时的错误

Question

我遇到了 IE 的问题，但在 FF、Chrome 等中没问题...

例如，我有一个 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 中，但我现在将其删除。

布局是一个主要的左栏(子导航)，它是'layl'然后'lay_mr'是右边的主要栏。它在顶部有搜索过滤器，然后在它下面分成 2 个列，结果在这两个列的左边。如果内容位于“layl”或“split_r180”中，则结果表会显示这两列中内容的高度。不过目前我把它们弄空了。

当触发/事件/运行发生在 select#models 时，它会中断。这是由 jQuery 处理的。

它执行回调，然后我使用 .html 更新选项，一旦它在 attr 上发生变化，它就会打破高度。

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

我也尝试过 removeAttr() ，但并不愉快。真的难倒了! :-/正如我所说，FF 和 Chrome 绝对没问题!典型的 IE 嗯？ :*)

非常感谢大家的帮助。

Answer 1

我已经设法通过一种可以说是加倍工作的方式修复了这个错误。我再次将它隐藏()和显示()#results，它使 IE 重新渲染它并再次实现它的高度。烦人但它解决了问题:-/