<li> <th> text-align inconsistency - css

Question

In IE, Edge, and Safari, a <th> descendant of a <li> is center-justified.
In Chrome, Firefox, and Opera, it's left-justified.
According to W3C Rendering recommendations (italics mine):
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'.
The italicized section states that a <th> element should be centered if its parent's text-align property hasn't been changed.
That's not the case for <th> descendants of <li> in Chrome, Firefox, and Opera. Am I correct in assuming that they are ignoring W3C recommendations?
(The problem is easily overcome by using th {text-align: center;}, so I don't need a solution.)
Edit
I've received a couple of good explanations for the behavior, but the answers are unsatisfactory – through no fault of the posters.
I think the intent of the W3C is that <th> elements should be centered unless they include or inherit a different explicit text-align style. It doesn't make sense that <th> elements should be left-justified due to a convoluted cascading inheritance of implicit styles.
It seems to hinge on what W3C means by "its initial value" in the quote. The "initial value" of a <li>'s text-align property is match-parent, which is apparently different from text-align: initial.
Hopefully the W3C will clarify this in the future. In the meantime, th {text-align: center;} solves the problem.
Example:
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

your issue is that li is by default text-align: match-parent (at least on Firefox), which mean the li are text-align:left (if direction is ltr otherwise is text-align:right) so if you change li to text-align:initial the th will work as you expect
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>

Answer 2

No, they are not ignoring W3C. From the quote in your question,
a parent node whose computed value for the 'text-align' property is its initial value
But that's not the case. The initial value for text-align is start, which computes to start. But <li> elements are styled with text-align: match-parent, which computes to left since the <ol> has direction: ltr. Even though start behaves like left because the <li> also has direction: ltr, they are different values. That's why the th is not centered.
Note both start and match-parent are recent additions. Possibly the th becomes centered on browsers which don't support them yet.
If you use li { text-align: initial; } then th th is centered.
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>