css - 表格元素在 Internet Explorer 中没有很好地对齐

Question

列表元素在 Internet Explorer 中未居中。但在 Chrome 中，元素是居中的。附件是示例代码。我正在为所有类使用 Bootstrap CSS Framework。

这是 JSfiddle https://jsfiddle.net/8cunpsvy/





HTML:

<div class="card-body">
    <table class="table-sm table-hover">
        <thead>
            <tr class="text-center">
                <th class="w-25" scope="col"></th>
                <th style="width: 54%" scope="col"></th>
                <th style="width: 10%" scope="col">Actual</th>
                <th style="width: 1%;" scope="col">Status</th>
                <th style="width: 10%" scope="col">Expected</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td class="text-center">2/13/2019</td>
                <td class="text-center">
                    <ul class="status-circle"><li></li></ul>
                </td>
                <td class="text-center"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.status-circle {
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    border-spacing: 0px;
    line-height: 0;
}

.status-circle li {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #000;
    width: 15px;
    height: 15px;
    background: #737373;
}

Answer 1

我已将里面的元素更改为 div，并从 li 元素转移了所有样式并添加了内容。

HTML:

<div class="card-body">
    <table class="table-sm table-hover">
        <thead>
            <tr class="text-center">
                <th class="w-25" scope="col"></th>
                <th style="width: 54%" scope="col"></th>
                <th style="width: 10%" scope="col">Actual</th>
                <th style="width: 1%;" scope="col">Status</th>
                <th style="width: 10%" scope="col">Expected</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td class="text-center">2/13/2019</td>
                <td class="text-center">
                    <div class="div-status-circle"></div>
                </td>
                <td class="text-center"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.div-status-circle {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #000;
    width: 15px;
    height: 15px;
    content: "";
    background: #737373;
}