我遇到了 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 中,但我现在把它去掉了。
布局是一个主要的左列(subnav),它是'layl',然后'lay_mr'是右侧的主要列。它在顶部有搜索过滤器,然后在它下面分成 2 个列,结果在这两个列的左边之一。如果内容位于“layl”或“split_r180”中,则结果表显示为这两列中内容的高度。目前我让他们空了。
当 select#models 上发生触发器/事件/运行时,它会中断。这是由 jQuery 处理的。
它执行回调,然后我使用 .html 更新选项,一旦它在 attr 上发生变化,它就会打破高度。
$("select#models").html(options);
$("select#models").attr("disabled","");
我也没有高兴地尝试过 removeAttr() 。真是难住了!:-/ 正如我所说的 FF 和 Chrome 绝对没问题!典型的 IE 嗯?:*)
感谢您的帮助,非常感谢。