Firefox不能处理“display：table-cell”中的绝对定位？ [英] Firefox can't handle absolute positioning within 'display:table-cell'?

问题描述

我需要两列相等的高度，因此使用display：table。到目前为止这么好。

I needed two columns of equal height, so used display:table. So far so good.

然后我需要链接到表格单元格的基线，所以去绝对定位。

I then needed links to line up at the base of the table-cells, so went for absolute positioning.

看起来很完美，但在Firefox中，链接不受position：relativetable-cells限制。有没有办法欺骗Firefox正确显示？

Looks perfect, except in Firefox where the links aren't constrained by the 'position: relative' table-cells. Is there a way to fool Firefox into displaying this correctly?

演示： 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 ...

Other than creating an HTML table, I can't think of a way around it. This must be possible with CSS...

推荐答案

通过添加一个额外的内部包装和使用一些JS你可以实现这： a href =http://jsfiddle.net/David_Knowles/wyTga/ =nofollow> http://jsfiddle.net/David_Knowles/wyTga/

By adding an extra inner wrapper and using some JS you can achieve this: 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(); });
});

这篇关于Firefox不能处理“display：table-cell”中的绝对定位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！