google-chrome - Chrome : CSS Style is applied only when you go to Google Developer tools

Question

我试图将圆 Angular 应用于 OpenLayers map ，发现它在 Firefox 中有效，但在 Chrome 中无效。我发现了一个相关问题Openlayer map with rounded corners这将我链接到另一个问题CSS Border radius not trimming image on Webkit ，这解释了 Google Chrome 浏览器不会将圆 Angular 应用于孙图像。

但是，在测试我是否可以将其直接应用于 child 时，我发现了一个奇怪的行为。 如果我打开 chrome 并测试代码，它会给出错误的行为(图像没有所需的圆 Angular )，但是当我转到开发人员工具并将鼠标悬停在元素选项卡上时(突出显示各种 div在页面中)，样式被正确应用，我得到了带圆 Angular 的预期输出。 您可以测试此 jsfiddle 上的行为:http://jsfiddle.net/K9qQ2/2/

我用过的CSS代码如下:

#map{
    border: 6px solid #7AC49F;
    border-radius: 30px 30px 30px 30px;
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    margin: 39px 10px 10px;
    position: absolute;
    right: 0;
    top: 0;
    background-color:#eee;
}

div.olMapViewport {
    border-radius: 25px;
}

.olLayerDiv{
   border-radius: 25px; 
}

这是一个错误吗？有没有办法让谷歌浏览器在不使用开发者工具的情况下应用样式？

Answer 1

尝试将 display: block; 添加到其他 div。 它似乎在 jsfiddle 中有效。