CSS 显示：阻止在 Chrome 或 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10556310/
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
Display:Block not working in Chrome or Safari
提问by graemegets
I have a simple need to display the cells of a table row vertically. This works just fine in FF, but not in Chrome or Safari on the Ipad.
我有一个简单的需求，即垂直显示表格行的单元格。这在 FF 中运行良好，但不适用于 iPad 上的 Chrome 或 Safari。
The example below renders as expected in FF, with each row cell under each other, but in Chrome, it seems to ignore the display:block altogether.
下面的示例在 FF 中按预期呈现，每一行单元格都在彼此之下，但在 Chrome 中，它似乎完全忽略了 display:block。
What is the issue - or is there a better way to do this.
有什么问题 - 或者有更好的方法来做到这一点。
(The reason for wanting this is that im using @media in the CSS to render the table differently for a small screen)
（想要这个的原因是我在 CSS 中使用 @media 为小屏幕呈现不同的表格）
for a more visual example:
一个更直观的例子：
A normal table might be
一个普通的表可能是
DATA1 | DATA2 | DATA3
but with display:block, it should be
但是使用 display:block 应该是
DATA1
DATA2
DATA3
Many Thanks
非常感谢
<html>
<head>
<style>
table,
thead,
tr,
td
{
display:block;
}
table,tr
{
border : 1px dotted red;
}
td
{
border:1px dashed blue;
}
thead
{
display:none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
回答by frontendzzzguy
EDIT 2:
编辑2：
I think I have worked out your problem. Webkit overrides display: block;and computes it to be display: table-cell;in a td when there is no <!DOCTYPE>declared for your html.
我想我已经解决了你的问题。当您的 html没有声明时，Webkit 会覆盖display: block;并将其计算为display: table-cell;在 td 中<!DOCTYPE>。
To fix this I recommend you set <!DOCTYPE html>before <html>at the top of your html.
要解决此问题，我建议您在 html 顶部<!DOCTYPE html>之前设置<html>。
The reason the jsfiddle will work is because the site has a <!DOCTYPE>already declared.
jsfiddle 可以工作的原因是该站点<!DOCTYPE>已经声明了一个。
Try this and let me know if it fixes your problem. If not I'll try find another answer.
试试这个，让我知道它是否能解决你的问题。如果没有，我会尝试找到另一个答案。
回答by StarMomo
Table broken in Chrome or Safari
Chrome 或 Safari 中的表格损坏
Many case occurs in tabless.
许多情况发生在表格中。
display:block;
display:"";
or
或者
display:block;
display:table-row;
*display:block;
回答by Chrisser
I've did a trick with using th's instead of td. And a css hack wich only applies on safari (not webkit general).
我用 th's 而不是 td 做了一个技巧。而且 css hack 只适用于 safari（不是 webkit 一般）。
HTML:
HTML：
<table>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</table>
CSS:
CSS：
table {
width: 100%;
text-align: left;
}
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
.safari-fix table tr {
display: block;
width: 100%;
}
}
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) {
@media {
.safari-fix table tr {
display: block;
width: 100%;
}
}
}
table th {
width: 100%;
display: block;
}
Here is my jsfiddle
这是我的jsfiddle
