Chrome DevTools:计算样式与CSS规则不同吗? [英] Chrome DevTools: Computed style different from css rule?

问题描述

当我在CSS文件中定义4px时，DOM元素的"border-top-width"怎么可能为0px.

How is it possible that my DOM element has a "border-top-width" of 0px when i defined 4px in my CSS file.

当我使用Chrome DevTools检查元素时，我看到计算出的样式告诉0px，而最高的CSS规则是4px. 而且甚至还没有删除.

When i inspect the element with Chrome DevTools i see that the computed style tells 0px, whereas the uppermost css rule is 4px. And it isn't even crossed out.

首先，我认为可能此时未加载CSS文件，但是当您查看"border-top-color"时，您会看到它起作用(设置并显示红色).

First i thought maybe the CSS file isn't loaded at this time, but when you look at the "border-top-color", you can see that it works (color red is set and displayed).

0px可能来自哪里，什么会覆盖我的CSS文件设置?

Where could the 0px come from, what does override my CSS file setting?

有人在ChromeDev工具中看到过这种行为吗?

Has anyone seen such a behaviour in ChromeDev Tools?

哇，大家很快，谢谢您！ 这是html元素.所有计算出的css属性都在添加的图片中.

Wow you guys are quick, thanks so far! This is the html element. all the computed css properties are in the added picture.

<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样式:

All computed css styles:

推荐答案

在元素的CSS中添加border-style: solid;即可解决此问题.

Adding border-style: solid; to the element's CSS will fix this.

(尽管这不是问题的答案，但它确实解决了所提出的示例问题，并且可能是大多数登陆此处的人正在寻找的东西.)

(Although this isn't an answer to the question, it does solve the example problem presented, and is probably what most people landing here are looking for.)

这篇关于Chrome DevTools:计算样式与CSS规则不同吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！