Css Firefox可以'；t在'内处理绝对定位；显示：表格单元格'；？

我需要两个高度相等的列，所以使用display:table。到目前为止还不错

然后我需要链接在表格单元格的底部对齐，所以选择了绝对定位

看起来很完美，除了在Firefox中，链接不受“位置：相对”表格单元格的约束。有没有办法愚弄Firefox，使其正确显示

演示：

HTML:

<div id="equal_cols">
    <div class="largeleft">
        <img style="padding: 5px; margin: 10px; float: right; border: 1px solid #ccc;" src="images/some_img.jpg" width="205" height="126" alt="image" />
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet.</p>
        <div class="alignlink"><a class="greybg" href="#">Read more</a></div>
    </div>
    <div class="col10px"></div>
    <div class="smallright">
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc laoreet leo nec sem porta scelerisque. In vestibulum fermentum metus, mattis placerat orci ornare quis. Maecenas vitae accumsan tellus.</p>
        <div class="alignlink"><a class="greybg" href="#">Read more</a></div>
    </div>
</div>

a.greybg {
    padding: 3px;
    background: #464646;
    color: #ffffff;
}
p {
    padding: 10px 20px;
    margin: 0;
    font-size: 0.875em;
}
div.alignlink {
    position: absolute;
    bottom: 10px;
    right: 10px;
    margin: 0;
    padding: 0;
}
.equal_cols {
    display: table;
    width: 798px;
}
.largeleft {
    display: table-cell;
    width: 500px;
    border: 1px solid #ccc;
    position: relative;
    padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/
}
.col10px {
    display: table-cell;
    position: relative;
    width: 10px;
}
.smallright {
    display: table-cell;
    width: 288px;
    border: 1px solid #ccc;
    position: relative;
    padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/
}

---

除了创建一个HTML表之外，我想不出其他解决方法。这必须在CSS中实现…

通过添加额外的内部包装并使用一些JS，您可以实现以下目标：

---

为了记录在案，这不是一个bug。规范中说，

对表行组、表头组、表尾组、表行、表列组、表列、表单元格和表标题元素的“position:relative”效果未定义。

不幸的是，Firefox已经这样做很长时间了。我看到的唯一帮助方法是，如果您真的想使用

表格单元格

将在该单元格内放置一个div，如

2000年错误报告的可能副本：@tw16看起来像from，而表示
“位置：相对”对表格元素的影响定义如下：…表格单元格相对于其在表格中的正常位置的偏移量…”
+1，很好的方法，希望您不介意，但我借此机会加强了您的插件参考，并提供了完整的解释，以便将来可以更正确地使用和重复。再一次，gj！谢谢@Timidfriendly。令人难以置信的是，CSS无法实现这一点，但你可以做到（谢谢，Firefox）。看起来像是带有HTML表回退的javascript。或者可能只是一个HTML表（不是真的；任何使用jQuery的借口）@我知道这很糟糕。在这里要务实，找到一个接近你已有的解决方案。在过去，我的做法不同；我将链接放在@SpYk3HH列下，您的示例不会在window.resize上执行。通过添加额外的CSS声明，它就做到了$（“.inner”）.css（“高度”、“自动”）.equalHeights（）；
//  This clean plugin layout provieds typical jQuery syntax such as $("element").plugin() or $.plugin("element")
(function($) {
    if (!$.equalHeights) {  //  checks to make sure this namespace is not already used in jQuery object (its not!)
        $.extend({  //  allows you to add methods to jQuery Object to be called, such as $.ajax
            equalHeights: function(elm) {   //  our function to be added
                //  the following simply checks to see if a jQuery Object is being passed in, or an element tag name/id/class
                if (typeof elm === "string") elm = $(elm);  //  now convert possible string to object
                //  the following maps all of our elements passed in and returns an array of their heights,
                //  then by using the math max method, we grab the biggest one
                var maxHeight = Math.max.apply(null, $(".inner").map(function () { return $(this).height(); }).get());
                //  the following maintains with jQuery's "chainability"
                return elm.each(function(index){ $(this).height(maxHeight); });
            }
        });
        $.fn.extend({   //  here we add element object methods, such as $("element").toggle
            equalHeights: function() {
                //  simply return our already made function, maintaining chainability
                return $.equalHeights($(this));
            }
        });
    }
})(jQuery);

$(function(){ 
    $(".inner").equalHeights();
    //  force resize on window height change if needed
    $(window).resize(function(e) { $(".inner").equalHeights(); });
});