Firefox 无法处理“display:table-cell"中的绝对定位? [英] Firefox can't handle absolute positioning within 'display:table-cell'?
问题描述
我需要两列等高，所以使用了 display:table.到目前为止一切顺利.
然后我需要将链接排列在表格单元格的底部，所以选择了绝对定位.
看起来很完美，除了在 Firefox 中，链接不受位置:相对"表格单元格的约束.有没有办法欺骗 Firefox 使其正确显示?
演示: http://jsfiddle.net/andy_lamb/C7qpX/
HTML:
<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>标题</h2><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Quisque mattis auctor metus，sit amet sollicitudin elit imperdiet sat amet.</p><div class="alignlink"><a class="greybg" href="#">阅读更多</a></div><div class="col10px"></div><div class="smallright"><h2>标题</h2><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Quisque mattis auctor metus，sit amet sollicitudin elit imperdiet sat amet.Nunc laoreet leo nec sem porta scelerisque.在前庭发酵，mattis placerat orci ornare quis.Maecenas vitae accumsan tellus </p><div class="alignlink"><a class="greybg" href="#">阅读更多</a></div>
CSS:
a.greybg {填充:3px；背景:#464646；颜色:#ffffff；}p{填充:10px 20px；边距:0；字体大小:0.875em；}div.alignlink {位置:绝对；底部:10px；右:10px；边距:0；填充:0；}.equal_cols {显示:表；宽度:798px；}.largeleft {显示:表格单元格；宽度:500px；边框:1px 实心 #ccc；位置:相对；填充:0 0 30px 0；/*为绝对定位的.greybg链接提供足够的空间*/}.col10px {显示:表格单元格；位置:相对；宽度:10px；}.smallright {显示:表格单元格；宽度:288px；边框:1px 实心 #ccc；位置:相对；填充:0 0 30px 0；/*为绝对定位的.greybg链接提供足够的空间*/}除了创建一个 HTML 表格之外，我想不出其他办法.这必须使用 CSS 才能实现...
通过添加额外的内部包装器并使用一些 JS，您可以实现:http://jsfiddle.net/David_Knowles/wyTga/
//这种干净的插件布局提供了典型的 jQuery 语法，例如 $("element").plugin() 或 $.plugin("element")(功能($){if (!$.equalHeights) {//检查以确保此命名空间尚未在 jQuery 对象中使用(不是！)$.extend({//允许你给jQuery对象添加方法来调用，比如$.ajaxequalHeights: function(elm) {//我们要添加的函数//以下只是检查是否正在传入 jQuery 对象，或元素标记名称/id/类if (typeof elm === "string") elm = $(elm);//现在将可能的字符串转换为对象//下面映射我们传入的所有元素并返回它们的高度数组，//然后通过使用 math max 方法，我们获取最大的var maxHeight = Math.max.apply(null, $(".inner").map(function () { return $(this).height(); }).get());//以下使用 jQuery 的可链接性"进行维护返回 elm.each(function(index){ $(this).height(maxHeight); });}});$.fn.extend({//这里我们添加元素对象的方法，比如 $("element").toggle等高:函数(){//简单地返回我们已经创建的函数，保持可链接性返回 $.equalHeights($(this));}});}})(jQuery);$(函数(){$(".inner").equalHeights();//如果需要，在窗口高度改变时强制调整大小$(window).resize(function(e) { $(".inner").equalHeights(); });});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.
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?
Demo: 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*/
}
Other than creating an HTML table, I can't think of a way around it. This must be possible with CSS...
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屋！
