在Firefox中的table-cell元素上定位上下文 [英] Positioning context on table-cell element in Firefox

问题描述

通常，我们可以将父元素设置为子元素绝对定位的上下文，如下所示：

< pre class =lang-css prettyprint-override> #parent {
position：relative;
}

#child {
position：absolute;
top：0;
left：0;
}


这一切都可以正常工作，但是当父母拥有 display 属性设置为 table-cell ，它在Firefox中不起作用。子元素的定位上下文将是其父元素之上最接近的已定位祖先。

注意，这在无处不在测试在IE8，IE9，Safari，Chrome&歌剧。

请参阅这里的小提琴： http：// jsfiddle。 net / RZ5Vx /

另请参阅这和父的 display 设置为 inline-block 无关，它在Firefox中有效。 p>

---

那么，这是一个错误吗？

解决方案

A table-cell 表示在表中，因此：

请参阅 working fiddle！

  div {
 display：table; / * this line * / 
 line-height：28px; 
 padding：0 20px; 
 background：#ddd; 
 position：relative; 
} 
  

注意：

你可以看到这个 quirksmode

---

EDITED

从 W3C推荐::表格

计算值表元素上的属性position，float，margin- *，top，right，bottom和left用于表格包装盒而不是表格框;所有其他非可继承属性的值将在表框而不是表包装盒中使用。 （其中表格元素的值不用于表格和表格包装盒，而是使用初始值）

不是一个bug，更像是一个 status-bydesign 的东西！请参阅此！

---

EDITED

要包含关于问题上请求的评论的工作：

所以，这是一个错误？

可能解决方法 are：

包含 div 作为相对; 请参阅小提琴！

  #wrapper {
 position：relative; 
} 
  

注意：最实用的解决方案！ >

使用 div 将内部元素包起来为 position：relative; 请参阅小提示

  #innerWrapper {
 position：relative; 
} 
  

注意需要原始元素要在innerWrapper上声明！

Usually, we can set a parent element to be the context for a child's absolute positioning, as follows:

#parent {
    position: relative;
}

#child {
    position: absolute;
    top: 0;
    left: 0;
}

This all works fine, but when the parent has its display property set to table-cell, it doesn't work in Firefox. The positioning context for the child element will be the closest positioned ancestor above its parent.

Of note, this works everywhere else. Tested in IE8, IE9, Safari, Chrome & Opera.

See the fiddle here: http://jsfiddle.net/RZ5Vx/

Also, see this fiddle with the parent's display set to inline-block, which does work in Firefox.

---

So, is this a bug? If so, is there anyway to work around it?

解决方案

A table-cell is meant to be inside a table, so:

See this working Fiddle!

div {
    display: table;      /* this line */
    line-height: 28px;
    padding: 0 20px;
    background: #ddd;
    position: relative;
}

Note: Since you don't have a table in there, set it.

You can see this quirksmode for the The display declaration.

---

EDITED

From the W3C recommendation :: Tables it reads

The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box; all other values of non-inheritable properties are used on the table box and not the table wrapper box. (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.)

This is not a bug, is more like a status-bydesign thing! Please see this!

---

EDITED

To include the work around placed on the comment as requested on the question:

So, is this a bug? If so, is there anyway to work around it?

Possible work around are:

Wrap the element with a div as position:relative; See Fiddle!

#wrapper {
    position: relative;
}

Note: most practical solution!

Wrap the inner elements with a div as position:relative; See Fiddle!

#innerWrapper {
    position: relative;
}

Note: requires some definitions from the original element to be declared on the innerWrapper!

这篇关于在Firefox中的table-cell元素上定位上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！