css - <li> <th> 文本对齐不一致

Question

在 IE、Edge 和 Safari 中，一个 <th> <li> 的后代是中心对齐的。

在 Chrome、Firefox 和 Opera 中，它是左对齐的。

根据 W3C Rendering建议(斜体是我的):

User agents are expected to have a rule in their user agent stylesheet that matches th elements that have a parent node whose computed value for the 'text-align' property is its initial value, whose declaration block consists of just a single declaration that sets the 'text-align' property to the value 'center'.

斜体部分表示 <th>如果其父元素的 text-align 元素应该居中属性未更改。

<th> 不是这种情况<li> 的后代在 Chrome、Firefox 和 Opera 中。我假设他们忽略了 W3C 建议是否正确？

(使用 th {text-align: center;} 很容易解决这个问题，所以我不需要解决方案。)

编辑

我收到了一些关于这种行为的很好的解释，但答案并不令人满意——这不是张贴者的错。

我认为 W3C 的意图是 <th>元素应该居中除非它们包含或继承不同的显式 text-align风格。 <th> 没有意义由于隐式样式的复杂级联继承，元素应该左对齐。

这似乎取决于 W3C 在引用中所说的“其初始值”的含义。 <li> 的“初始值”的 text-align属性是 match-parent ，这显然不同于 text-align: initial .

希望 W3C 将来能澄清这一点。与此同时，th {text-align: center;}解决问题。

---

示例:

th, td {
  border: 1px solid #ddd;
}

<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum<br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
        <td>More
      </tr>
    </table>
  </li>
</ol>

Answer 1

你的问题是 li 默认是 text-align: match-parent (至少在 Firefox 上)，这意味着 li是text-align:left (如果方向是 ltr，否则是 text-align:right)所以如果你将 li 更改为 text-align:initial th 将按您预期的方式工作

match-parent

Similar to inherit, but the values start and end are calculated according the parent's direction and are replaced by the adequate left or right value.

th,
td {
  border: 1px solid #ddd;
}
li {
  text-align: initial
}

<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum
          <br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
          <td>More
      </tr>
    </table>
  </li>
</ol>