CSS 中的 !important 规则在 firefox 中不适用于 table 的宽度样式

Question

目前，我在 CSS 中添加了以下样式，但宽度在 firefox 中设置不正确，但在 Chrome、IE、Mircosoft Edge 中同样有效。你能告诉我如何让它在 Firefox

中工作吗

Please View Demo In Full Window to Produce issue in Firefox

HTML代码

 <tbody>

                    <tr class="features" ng-repeat="list in opMessageLogs">
                        <td style="width : 183px !important;">{{list._id.$id}}</td>
                        <td style="width : 353px !important;">{{list.OPERATION}}</td>
                        <td style="width : 88px !important;">{{list.STATUS}}</td>
                        <td style="width : 153px !important;">{{list.ACCOUNTNUMBER}}</td>
                        <td style="width : 130px !important;">{{list.SENDTIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td style="width : 130px !important;">{{list.RECEIVETIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td ng-click="showText(list.REQUEST,$index)" style="width : 113px !important;"><a style="cursor: pointer;">Request</a></td>
                        <td ng-click="showText(list.RESPONSE,$index)" style="width : 128px !important;"><a style="cursor: pointer;">Response</a></td>
                    </tr>

                </tbody>

Firefox 问题

正如您在下面的屏幕截图中看到的，第一个元素的宽度设置为 183px，但它反映为 194.867px

Answer 1

虽然 td 的默认 UA 样式是 box-sizing: border-box;，但 Firefox 在显示为 table-cell 的元素上似乎存在问题 - 相反，这些元素始终表现为 box-sizing: content-box.

如 comment9156608_7554843 中所述，为 table 单元格添加 display: inline-block 似乎是一个可靠的解决方法。

Answer 2

在某些情况下，例如我的情况，firefox 不适用 width: 100%; 和 display: table;，只是无法识别或其他原因，我不知道。然后我做了一点搜索，找到了一种方法，通过更改宽度值 width: -moz-max-content; 使显示 table 在 firefox 中正常工作。

这是完整的代码

display: table !important;
position: absolute;
top: 25px;
left: 0;
width: -moz-max-content;

以防有人和我有同样的问题。

CSS 中的 !important 规则在 firefox 中不适用于 table 的宽度样式

!important rule in CSS not working in firefox for width style for table

css

firefox

fixed-width

这是完整的代码