【问题标题】:Why are table cells displayed differently in different browsers?为什么表格单元格在不同的浏览器中显示不同?
【发布时间】:2019-01-16 21:41:03
【问题描述】:

这是显示问题的屏幕截图:

这是我正在使用的 CSS:

#board table {
    background: #eef0ff;
    border-spacing: 0px;
    border: 1px solid #475476;
}

#board td {
    height: 20px;
    width: 20px;
    border: 1px solid #cfd7ee;
}

如何使不同浏览器中的单元格大小相同?有谁知道为什么 Opera 和 Firefox 会收紧单元格?

【问题讨论】:

  • 这是默认样式。诸如边距和填充之类的东西。这就是为什么有些人喜欢使用重置文件的原因。比如迈耶的这个。 meyerweb.com/eric/tools/css/reset
  • 有些人喜欢只覆盖相关的默认样式,找出确切原因而不添加一个全新的默认替换来学习。

标签: html css css-tables


【解决方案1】:

您需要使用CSS reset,或为设计中的表格边距、填充和其他元素设置一些您自己的默认值。

CSS 重置(您的或第三方的)将确保所有浏览器在样式方面具有相似的起点,因为不同的浏览器在不同元素上没有相同的默认样式。

另外,正如@thirtydot 在his answer 中所说,一些浏览器会忽略完全空的表格单元格的高度,例如<td></td>。为确保它不被忽略,您应该在这些单元格中添加一些内容,一个不错的选择是不间断空格 -  ,以这种方式:<td> </td>

【讨论】:

  • 我没有投反对票,但在这种情况下,我认为您的答案不正确。看看我的回答。
  • @thirtydot - 可能。我想说我们都得到了部分的答案。
  • 嗯,不是真的。没有常见的 CSS 重置可以解决此问题。当然,重置可能有助于解决其他不一致问题,但它不会解决这个问题
  • 伙计们,没有一个答案没有帮助。   和 reset.css 都没有。
  • @user1048261 - 也给TR 一个height
【解决方案2】:

你的单元格都是空的,对吧? <td></td>?

一个绝对有效的解决方法是在每个单元格中粘贴一个 <td> </td>

有关其他一些想法,请参阅:CSS table, table-cell height issue in Firefox

【讨论】:

  • 不知道为什么这会被否决,我几乎可以肯定正确。在 Firefox/Chrome 中比较:jsfiddle.net/thirtydot/L3EQJ
  • 我没有对你投反对票,但我查看了你的 jsfiddle,两个单元格完全相同。此外,这个答案不是问题的解决方案。我希望这有助于降低您的确定性
  • @Abe Petrillo:这解决问题的方法。在最初的问题中,单元格在 Chrome + IE 中看起来很好,在 Opera + Firefox 中被挤压。你猜怎么着:i.stack.imgur.com/3aoQF.png。 ಠ_ಠ
【解决方案3】:

首先重置您的 HTML 代码默认属性,例如 padding、margin、height、width.etc..,然后将您的样式应用到工作中

更好的重置css是Eric Mayer's

【讨论】:

    猜你喜欢
    • 2011-05-07
    • 2011-06-25
    • 2017-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-07
    • 2013-03-13
    • 2019-09-30
    相关资源
    最近更新 更多