Question

我在页面上有几个相同类别的元素，并且我试图将它们全部设置为相同的高度，即使内部内容略有不同。我已经整理了一个小功能，可以在Firefox 2+和Safari 3+中产生结果，但显然甚至没有在IE 7中注册。这就是我正在使用的内容：

var tallestcopy = 0;
    $(".calloutL2Copy").each(
        function(index) {
            var tallest = $(this).height();
            if (tallest > tallestcopy) { 
                tallestcopy = tallest 
            }
        });
    $(".calloutL2Copy").css("height",tallestcopy);

将类“.calloutL2Copy”应用于包含某些文本和偶尔图像的div。我也尝试用以下代码替换最后一行：

$(".calloutL2Copy").height(tallestcopy);

同样，这适用于Firefox和Safari，但对IE中的相同div没有影响。我已经验证IE正在获得最高的像素值，它只是没有应用于兄弟姐妹。任何人都可以提出一些建议让这件事有效吗？

更新：

以下是我尝试应用此技术的网站代码示例。我没有编写代码（我知道有一个严重的div-itis案例），我只是想修复CSS错误。

<div id="calloutL2Top">
<div class="calloutL2">
    <a href="#"><img class="calloutL2Img" alt="" src="something.jpg" width="217" height="81"></a>
    <div class="calloutL2Copy">
        <h3>Lorem Ipsum</h3>
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

<div class="calloutL2">
    <a href="#"><img class="calloutL2Img" alt="" src="something.jpg" width="217" height="81"></a>
    <div class="calloutL2Copy">
        <h3>Lorem Ipsum</h3>
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div></div>

再次更新：

我从更高权力开始，我将直接发布网站的IP来处理相关页面，以便您可以直接查看问题所在：

[url removed]

我想要修复的是主要内容区域底部的一系列框。希望这会有所帮助。

Answer 1

你试过吗

$(".calloutL2Copy").children().css("height",tallestcopy);

这应该将css样式应用于.calloutL2Copy的所有第一级子级。

另外，您的HTML究竟是如何嵌套的？您可以尝试的另一件事是在脚本运行时对Firefox进行firebug，并确切了解什么是您的价值。这可能有助于您了解IE无法正常工作的原因。（如果你有IE8，它有开发人员工具，你也可以在脚本之后查看你的HTML，看看究竟是什么获得了css，什么没有）。

Answer 2

我认为你需要指定一个单位......

$(".calloutL2Copy").css("height", tallestcopy + "px");

修改

我认为你是IE漏洞的受害者。为了解决这个问题，我相信你需要一个明确的div作为你浮动父母的最后一个孩子......

<div style="clear:both; font-size:1px; height:1px"> </div>

编辑2：

查看您网站的来源。第一行需要是DOCTYPE，你有一个奇怪的角色。有那个？！

Answer 3

我使用HTML 4.01 Strict DOCTYPE以及您在问题中提供的确切代码制作了测试页面，并且它在IE 6,7和8中按预期工作。可能是你的CSS中有一个预设的高度或最小/最大高度被继承并导致冲突，或者是否会对页面上其他JavaScript的高度进行另一次操作？

http://www.lifford.org/exp/testcase/stackoverflow_IEheights.html

在IE中使用jQuery设置相同高度的问题

3 个答案: