Question

我最近在网站上添加了一点点jquery来修复IE7中的渲染错误。不幸的是由于某种原因，这个小小的节目脚本打破了底部的一些div，我不能为我的生活找出原因。我已经花了太多时间搞乱它，确保div正确对齐等等。

有人能告诉我为什么这个脚本会改变我的代码显示方式吗？

<script type='text/javascript'>
$(document).ready(function() { $('#hide').show() })
</script>

下面是带有隐藏和没有隐藏的版本的链接，这样你就可以看到我正在谈论的内容以及所有代码。

如果有人有任何关于如何解决这个问题的线索，我将非常感谢推动正确的方向。

谢谢。

Answer 1

您不应该将jQuery用于此解决方案。使用附加样式表进行条件注释以解决IE7问题是一种更好的解决方案。

创建一个新的样式表，其中包含仅在IE7中修复此问题的css。然后，将其放入名为ie-7-fix.css的文件中，并将此代码添加到HTML中：

＆lt;！ - [if IE IE 7]＆gt;
＆lt; link href =“css / ie-7-fix.css”rel =“stylesheet”type =“text / css”/＆gt;
百分比抑制率ENDIF] - GT;！

Answer 2

您的小部件设置为高度为0px，添加它们的脚本必须查看容器高度，并且显示无效高度为0px width 0px;

<。> $('.widget').height(120)之后.show（）应该修复它。

将main.js移到$(document).ready(function() { $('#hide').show() })以下也可能会有所帮助。

Answer 3

使用Firebug我可以看到“工作”页面将widgetWrap div中的div定义为高度为120px。有些JavaScript正在注入

style="height: 120px;"

进入每个widget div。

在“破碎”页面中，同样的JavaScript正在注入

style="height: 0px;"

会导致您看到重叠的文字。现在哪个JavaScript正在做这个我不知道，但我猜它是因为破页中的正文风格定义了display:none的样式。

Answer 4

您正在进行的等高操作是针对隐藏元素运行的，因此高度都设置为0。