css - Internet Explorer 8 中的 "content"CSS 属性添加的居中文本

Question

我创建了一个包含一些内容的 HTML 表格。有些单元格的内容下方应该有一个星号 (*)，因此我向这些单元格添加了一个 asterisk 类:

<table class="numbers">
    <tr>
        <td class="asterisk">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td class="asterisk">6</td>
        <td class="asterisk">7</td>
        <td>8</td>
    </tr>
</table>

然后，我添加了以下 CSS 规则，它使用 :after 伪元素以及 content 属性。它附加星号并将其放在单元格内容下方:

.asterisk:after {
    display:block;
    content: '*';
}

此外，我还为单元格添加了一些空间，在它们上面加了边框，更重要的是，使它们的文本集中显示:

.numbers td {
    width: 40px;
    border: 1px solid black;
    text-align: center;
}

有了更多的 CSS 规则(可以在 fiddle 中看到)，我得到了以下结果:

嗯，我的意思是，我在 Firefox 和 Chrome 上得到了这个结果，但我在 Internet Explorer 8 中也需要它!然而，我得到了这个:

如何在 IE8 中获取第一个结果？

Answer 1

看起来，与其他浏览器不同，Internet Explorer 8 及更低版本中伪元素的 CSS 附加内容不会继承父元素的 text-align 属性。幸运的是，解决方案很简单:只需将 text-align 属性添加到伪元素规则中，如 this fiddle 所示。 :

.asterisk:after {
    text-align: center;
    display: block;
    content: '*';
}

或者，更好的是，您可以让子伪元素继承父元素的 text-align 属性:

.asterisk:after {
    text-align: inherit;
    display: block;
    content: '*';
}