【问题标题】:Why does an absolutely positioned div get display:block instead of the specified table-cell?为什么绝对定位的 div 得到 display:block 而不是指定的表格单元格?
【发布时间】:2012-07-26 14:06:30
【问题描述】:

我确定这与 position:absolute 以及覆盖 css display 属性以阻止有关。

正如您在下图(以及此fiddle)中看到的那样,左侧(绝对)的 div 不会垂直居中其文本,但右侧的 div 会(它是相对的)。如果在chrome调试器中看到,前者有display:block,后者有display:table-cell

问题:我知道定位某些内容绝对会“将其从文档流中删除”,但这是否意味着它不会覆盖显示并且所有内容都将默认为其默认显示(即阻止div,内联跨度等)为什么?这种行为是否有特定原因?

【问题讨论】:

  • 您指定了display:table-cell 而不是display:block ?
  • Firefox 似乎无法确定放置相对定位的表格单元格的位置。

标签: css


【解决方案1】:

任何具有 position:absolute 的元素都将被视为 display:block。它不会被默认处理。

'从文档流中删除它'

意味着它将被视为自己的图形实体,而不是与任何其他实体相关。一个元素只能显示为与表格相关的表格单元格。大多数显示模式仅在与其他元素相关时才有意义。主要的例外是 'block' 和 'none'

我制作了一个非常粗略的fiddle,它显示了 div 和 span 元素的各种显示类型的相对与绝对示例。请注意 display:none 既适用于相对定位也适用于绝对定位,但 display:inline 仅适用于相对定位。

【讨论】:

    【解决方案2】:

    这是spec 要求的:

    如果'position'的值为'absolute'或'fixed',则框是绝对定位的,'float'的计算值为'none',按下表设置显示

    在规范的该部分显示的表格中,“display”的任何与表格相关的值都会计算为“block”。

    正如你所说,绝对定位某物会将其从正常流程中移除;因此,它不再有要显示的表格,因此将其显示为表格单元格不再有意义。为了将元素显示为表格单元格,它需要适当的容器,而且这些容器似乎只能在正常流程中隐式生成。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-06-09
      • 1970-01-01
      • 1970-01-01
      • 2012-02-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多