表元素在 Internet Explorer 中没有很好地对齐答案

【问题标题】：Table Elements not aligning well in Internet Explorer表元素在 Internet Explorer 中没有很好地对齐
【发布时间】：2019-07-16 06:15:50
【问题描述】：

Internet Explorer 中的列表元素未对齐中心。但是在 Chrome 中，元素是居中的。附上示例代码。我对所有类都使用 Bootstrap CSS 框架。

这是 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;
}

【问题讨论】：

为什么要在td 中设置宽度？您已经在th 中设置了宽度，因此下面的td 将与th 具有相同的宽度
我将删除它。感谢您的提醒。

标签： css internet-explorer bootstrap-4

【解决方案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;
}

【讨论】：

【解决方案2】：

试试这个小提琴

Fiddle

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

您可以通过使用 div 或 span 来实现此目的，而不是对单个项目使用列表元素

【讨论】：