!CSS 中的重要规则不适用于 Firefox 中的表格宽度样式答案

【问题标题】：!important rule in CSS not working in firefox for width style for table!CSS 中的重要规则不适用于 Firefox 中的表格宽度样式
【发布时间】：2016-11-20 15:07:01
【问题描述】：

目前我在 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

【问题讨论】：

inspector中反映的宽度还包括padding和border。在这种情况下，它应该是183px + 2 * 8px = 199px。我猜您将表格的宽度设置为100%。 tds 将适合给定的表格宽度 - 因此忽略您分配给它们的 exact 值。
但在其他浏览器中也是如此，我现在需要更改..
如果您将表格宽度设置为相对值（如100%），则单元格也应该是relative（在% 中）。如果您希望单元格宽度与样式属性中给出的完全相同，则必须根据单元格累积值确保表格具有 absolute 宽度（在px 中）。但是，如果浏览器窗口不够宽，这可能会导致溢出。
我要使用 OverScroll，因为我已经确保使用 Scrollbar 溢出
在这种情况下，我必须要求您重现您的具体问题（在 jsbin、jsfiddle 等中），因为无法看到完整的上下文就无法回答。跨度>

标签： css firefox fixed-width

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

这是完整的代码

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

以防万一有人像我一样遇到麻烦。

【讨论】：