显示：阻止在 Chrome 或 Safari 中不起作用
Posted
技术标签:
【中文标题】显示：阻止在 Chrome 或 Safari 中不起作用【英文标题】：Display:Block not working in Chrome or Safari 【发布时间】：2012-05-20 08:13:09 【问题描述】：我需要垂直显示表格行的单元格。这在 FF 中工作得很好，但在 Ipad 上的 Chrome 或 Safari 中却不行。
下面的示例在 FF 中按预期呈现，每个行单元格在彼此下方，但在 Chrome 中，它似乎完全忽略了 display:block。
有什么问题 - 或者有更好的方法来做到这一点。
（想要这个的原因是我在 CSS 中使用 @media 来为小屏幕呈现不同的表格）
更直观的例子：
一张普通的桌子可能是
DATA1 | DATA2 | DATA3
但使用 display:block，它应该是
DATA1
DATA2
DATA3
非常感谢
<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>
【问题讨论】：
你为什么要制作比它们更复杂的表格？如果要显示单列表，则只需制作单列表；无需使用display: block; 定义它们。
【参考方案1】：
编辑 2：
我想我已经解决了你的问题。当您的 html 没有声明 <!DOCTYPE> 时，Webkit 会覆盖 display: block; 并将其计算为 td 中的 display: table-cell;。
要解决此问题，我建议您在 html 顶部设置 <!DOCTYPE html> 之前的 <html>。
jsfiddle 可以工作的原因是该站点已经声明了<!DOCTYPE>。
试试这个，如果它可以解决您的问题，请告诉我。如果没有，我会尝试找到另一个答案。
【讨论】：
不，不是我的意思。我在正文中添加了我的意思的文本示例。让我知道这仍然不清楚。谢谢 我在 FF 和 Chrome 中添加了我的结果的屏幕截图。您在哪个版本的 Chrome 中进行测试？ 是的，这就是我所期望的——但在没有运行 mac 的情况下——在 windows 上。有趣的是，我编写代码的开发人员（现在正在度假）似乎认为它有效并且他在 Mac 上 - 所以 Mac 和 PC 上的 Chrome 之间存在差异 - 尽管它也不适用于 Ipad 上的 Safari Chrome 版本为：18.0.1025.168 m 有趣的是，您的 jsFiddle 代码（没有“float”）在 Chrome 中运行良好！不仅在 jsFiddle 中运行时。【参考方案2】：我用 th 代替 td 做了一个技巧。 并且 css hack 仅适用于 safari（不是 webkit 通用）。
HTML：
<table>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</table>
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;
这是我的jsfiddle
【讨论】：
【参考方案3】：Chrome 或 Safari 中的表格损坏
很多情况发生在表中。
display:block;
display:"";
或
display:block;
display:table-row;
*display:block;
【讨论】：
以上是关于显示：阻止在 Chrome 或 Safari 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Div 在 Firefox、Safari、Chrome 等中显示，但在 Internet Explorer 中不显示
Tablesorter Pager 在 Safari 或 Chrome 中不起作用
jQuery .hover 在 Safari 或 Chrome 中不起作用
单选按钮更改事件在 chrome 或 safari 中不起作用