css - Firefox 无法处理 'display:table-cell' 内的绝对定位？

Question

我需要两列等高，所以使用了 display:table。到目前为止一切顺利。

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

看起来很完美，除了在 Firefox 中，链接不受“position:relative”表格单元格的限制。有没有办法让 Firefox 正确显示它？

演示: http://jsfiddle.net/andy_lamb/C7qpX/

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>

CSS:

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 才能实现...

Answer 1

通过添加额外的内部包装器并使用一些 JS，您可以实现此目的:http://jsfiddle.net/David_Knowles/wyTga/

//  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(); });
});