Chrome DevTools：计算风格不同于 css 规则？答案

【问题标题】：Chrome DevTools: Computed style different from css rule?Chrome DevTools：计算风格不同于 css 规则？
【发布时间】：2017-11-24 14:23:07
【问题描述】：

当我在 CSS 文件中定义 4px 时，我的 DOM 元素的“border-top-width”怎么可能是 0px。

当我使用 Chrome DevTools 检查元素时，我看到计算的样式告诉 0px，而最上面的 css 规则是 4px。它甚至没有被划掉。

首先我认为可能此时 CSS 文件没有加载，但是当您查看“border-top-color”时，您可以看到它可以正常工作（设置并显示红色）。

0px 是从哪里来的，什么会覆盖我的 CSS 文件设置？

有没有人在 ChromeDev Tools 中看到过这种行为？

编辑：哇你们真快，到目前为止谢谢！这是 html 元素。所有计算的 css 属性都在添加的图片中。

<div id="PageStyleTest2_MeasurementSystemSelector_styled_ddList_11" data-brease-widget="widgets/brease/ListBox" style="width: 150px; height: 120px;" class="breaseListBox breaseWidget widgets_brease_ListBox_style_default">
    <ul>
        <li style="height:40px; " data-brease-value="metric"><span>Metrisch</span></li>
        <li style="height:40px; " data-brease-value="imperial" class="selected"><span>Imperial</span></li>
        <li style="height:40px; " data-brease-value="imperial-us"><span>Imperial U.S.</span></li>
    </ul>
</div>

所有计算的 css 样式：

【问题讨论】：

你试过了吗：border-top-width: 4px !important; ??
什么是元素？我们需要更多上下文来帮助您解决边框折叠的原因。
@FrankCamara 不幸的是没有帮助
我不是专家，所以我会简单地划分'n'conquer，例如禁用应用于元素及其父元素的规则，直到边框发生变化。
可能的答案：我发现，那种无聊的风格不知何故不见了。当我添加边框样式时，也设置了正确的 -width 值。

标签： javascript html css google-chrome google-chrome-devtools

【解决方案1】：

将border-style: solid; 添加到元素的 CSS 将解决此问题。

（虽然这不是问题的答案，但它确实解决了给出的示例问题，并且可能是大多数登陆这里的人正在寻找的。）

【讨论】：