JQuery:IE样式错误/错误选择attr()更改

时间:2009-06-15 18:18:31

标签: jquery css internet-explorer height

我遇到了IE的问题,在FF,Chrome等方面很好......

我有一个2列布局,其中用于调试ive清空左侧的一个。右侧在表格中有一长串结果列表,上面有可排序的选项。

在此可排序选项部分中,有一个选择框,其中包含动态生成的选项。在通过$(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个cols,结果在这两个中的左边一个。如果内容放在'layl'或'split_r180'中,则结果表显示这两列中内容的高度。目前,我把它们弄得空了。

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

它进行回调,然后我使用.html更新选项,一旦它达到attr的变化就会打破高度。

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

我也尝试过removeAttr()没有快乐。真的很难过! : - /我说FF和Chrome绝对没问题!典型的IE eh? :*)

感谢任何帮助,非常感谢。

1 个答案:

答案 0 :(得分:1)

我设法通过某种方式修复错误,可以这么说。我让它隐藏了()并再次显示()#results,它让IE重新渲染它并再次实现它的高度。很烦人,但它解决了问题: - /