1

我创建了一个包含一些内容的 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 规则（可以在这个小提琴中看到），我得到了以下结果：

单元格对齐显示后添加的内容

好吧，我的意思是，我在 Firefox 和 Chrome 上得到了这个结果，但我在 Internet Explorer 8 中也需要它！然而，在那里，我得到了这个：

单元格左对齐后添加的内容

我怎样才能在 IE8 中获得第一个结果？

4

1 回答 1

3

似乎与其他浏览器不同，Internet Explorer 8 及更低版本中的伪元素的 CSS 附加内容不会text-align从父元素继承属性。幸运的是，解决方案很简单：只需text-align在伪元素规则中添加一个属性，就像在这个小提琴中一样：

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

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

.asterisk:after {
    text-align: inherit;
    display: block;
    content: '*';
}
于 2013-11-06T22:13:17.230 回答