google-chrome - Chrome：CSS 样式仅在您转到 Google 开发者工具时应用

Question

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

但是，在测试我是否可以将其直接应用于孩子时，我发现了一个奇怪的行为。如果我打开 chrome 并测试代码，它会给出错误的行为（图像没有所需的圆角），但是当我转到开发工具时，将鼠标悬停在元素选项卡上（突出显示各种 div在页面中），样式被正确应用，并且我得到了带有圆角的预期输出。您可以在此 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 中工作。