Html 位置相对不适用于显示表格单元格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17526370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position relative not working with display table-cell?
提问by Andrew
I've created a horizontal menu composed of buttons. I need these buttons to resize in width so that together they occupy 100% of the width of the menu container. It should act the same way a TD does inside a TABLE.
我创建了一个由按钮组成的水平菜单。我需要这些按钮调整宽度，以便它们一起占据菜单容器宽度的 100%。它的行为方式与 TD 在 TABLE 中的行为方式相同。
As such, here's the code I came up with:
因此，这是我想出的代码：
<div id="menubar">
<div id="menu">
<div class="button">
<Button>Button 1</Button>
</div>
<div class="button">
<Button>Button 2</Button>
</div>
<div class="button">
<Button>Button 3</Button>
</div>
<div class="button">
<Button>Button 4</Button>
</div>
</div>
</div>
and my CSS:
和我的 CSS：
#menubar {
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
}
#menu {
display: table-row;
}
#menu .button {
position: relative;
display: table-cell;
}
#menu .button Button {
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
left: 0px;
}
This works perfectly in every browser except Mozilla. Mozilla doesn't seem to respect the relative position of the button class and, as such, the Buttons all get positioned absolutely one of top of each other (instead of absolutely inside the DIV with class "button").
这在除 Mozilla 之外的所有浏览器中都能完美运行。Mozilla 似乎不尊重按钮类的相对位置，因此，按钮都绝对位于彼此的顶部之一（而不是绝对位于具有“按钮”类的 DIV 内）。
After some further research, it seems this is a known issue with Mozilla not respective position "relative" when display is set to "table-cell".
经过一些进一步的研究，当显示设置为“表格单元格”时，这似乎是 Mozilla 的一个已知问题，而不是各自的“相对位置”。
Does anyone know a work around to achieve what I'm looking to do?
有没有人知道解决办法来实现我想要做的事情？
Note: The menu is dynamic so I don't know how many buttons there will be so I can't provide percentage widths for each button.
注意：菜单是动态的，所以我不知道会有多少个按钮，所以我不能提供每个按钮的百分比宽度。
回答by Marc Audet
Using position: relative in a table cell is not defined
使用位置：未定义表格单元格中的相对位置
The CSS specification at W3.org says that the effect of position: relativeis undefined for table-cell and other table elements.
W3.org 上的 CSS 规范说position: relative对于表格单元格和其他表格元素的效果是未定义的。
See: http://www.w3.org/TR/CSS21/visuren.html#choose-positionfor more details.
有关更多详细信息，请参阅：http: //www.w3.org/TR/CSS21/visuren.html#choose-position。
As a result, some browsers seem to allow table cells to behave like a containing block for any absolutely positioned child elements within the table cell (see http://www.w3.org/TR/CSS21/visuren.html#comp-absposfor more details). However, some browser do not try to extend the specification and disregard position: relativewhen applied to table cells.
因此，某些浏览器似乎允许表格单元格的行为类似于表格单元格内任何绝对定位的子元素的包含块（请参阅http://www.w3.org/TR/CSS21/visuren.html#comp-abspos更多细节）。但是，某些浏览器position: relative在应用于表格单元格时不会尝试扩展规范并忽略。
You are seeing normal behavior for a compliant browser, but for behaviors not defined by the CSS specification, browsers are free to do or not to do what they please, so results will vary.
您看到的是兼容浏览器的正常行为，但对于 CSS 规范未定义的行为，浏览器可以自由地做或不做他们喜欢做的事情，因此结果会有所不同。
How to Work Around This
如何解决这个问题
What I do for these situations, I place a block level wrapper element within the cell that has absolute positioning (I set the offsets so that the wrapper fills the table cell), and then absolutely position my inner child elements with respect to the wrapper.
对于这些情况，我会在具有绝对定位的单元格中放置一个块级包装器元素（我设置偏移量以便包装器填充表格单元格），然后相对于包装器绝对定位我的内部子元素。
Making Buttons Scale both in Width and Height
使按钮在宽度和高度上都缩放
The following CSS will allow the button element to fill up the width and height of the table cell:
以下 CSS 将允许按钮元素填充表格单元格的宽度和高度：
body, html {
height: 100%; /* if you want a to fil up the page height */
}
#menubar {
width: 100%;
height: 100%; /*or else fix this height... 100px for example */
display: table;
table-layout: fixed;
}
#menu {
display: table-row;
}
#menu .button {
display: table-cell;
border: 1px dotted blue;
height: 100%; /* scale the height with respect to the table */
}
#menu .button Button {
width: 100%;
height: 100%; /* scale the height with respect to the table cell */
}
You need to set a height for the #menubarand then make sure that both the table-cell and the button have height: 100%(think of a chain of inheritance, table to table-cell and then table-cell to button).
您需要为 设置一个高度#menubar，然后确保表格单元格和按钮都具有height: 100%（想想继承链，表格到表格单元格，然后表格单元格到按钮）。
回答by Nitesh
Remove right, bottom, top and left positioning from the #menu .button Button
删除右侧、底部、顶部和左侧定位 #menu .button Button
For Instance,
例如，
#menu .button Button {
position: absolute;
/*right: 0px;
bottom: 0px;
top: 0px;
left: 0px;*/
}
Here is the WORKING DEMO
这是工作演示
If you want pure display:table-cell;solution, you just need to remove the positioning
如果你想要纯display:table-cell;溶液，你只需要删除positioning
For Instance,
例如，
#menubar {
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
}
#menu {
display: table-row;
}
#menu .button {
display: table-cell;
}
#menu .button Button {
right: 0px;
bottom: 0px;
top: 0px;
left: 0px;
}
Here is the WORKING DEMO - 2
这是工作演示 - 2
EDIT
编辑
To stretch the buttons to occupy the width, here is the solution.
要拉伸按钮以占据宽度，这是解决方案。
The Code:
编码：
#menu .button Button {
width: 100%;
}
Here is the WORKING DEMO - 3
这是工作演示 - 3
EDIT - 2
编辑 - 2
As per the request of the OP to imply a provision to add a height to the buttons, here is the solution for the same. The addition of height:100%;is the OP's contribution to this solution.
根据 OP 要求为按钮添加高度的规定，这里是相同的解决方案。添加height:100%;是 OP 对此解决方案的贡献。
#menu .button Button {
display:table-cell;
width: 100%;
height:100%;
}
Here is the WORKING DEMO - 4
这是工作演示 - 4
