webkit浏览器中“text-align：start”样式表头的可能错误

Question

如果我在HTML TABLE 中的 TH 元素上使用 text-align：start; ，我希望内容在左（在LTR语言环境中）。相反，它仍然在中心：

<table style="width:100%;">
    <tr>
        <td>Default TD</td>
    </tr>
    <tr>
        <td style="text-align:start;">Start TD</td>
    </tr>
    <tr>
        <td style="text-align:end;">End TD</td>
    </tr>
    <tr>
        <th>Default TH</th>
    </tr>
    <tr>
        <th style="text-align:start;">Start TH</th>
    </tr>
    <tr>
        <th style="text-align:end;">End TH</th>
    </tr>
</table>

JSFiddle Link

看起来应该是这样......

......但是看起来像这样......

请注意， TD 元素的行为符合预期。

我在Chrome 32.0.1700.107和Safari 7.0.1中遇到此行为，所以我假设它是一个webkit错误，但我想检查一下我的假设。

Answer 1

text-align:start和text-align:left也会这样做。

实际上，<td style="text-align:start;">Start TD</td>也不起作用。

如果您不想使用'left'属性，请尝试使用

<th style="direction: rtl;text-align:end;">Start TH</th>。

它显示<th>的默认开始位于行的中心。您可以通过尝试替换来检查它。

http://jsfiddle.net/bf6ZU/

如果我错了，请纠正我。

Answer 2

我很确定这是一个错误，我已将其提交给Chrome小组，因此我将回答一个解决方法（根据@MrLister的建议）。

我们可以像这样使用CSS目录选择器：

th.startFix {
    text-align:start;
}
/* Not needed once text-align: start is fully supported for TH elements */
[dir="ltr"] th.startFix { text-align: left; } 
[dir="rtl"] th.startFix { text-align: right; }

JSFiddle Example