Question

我尝试将圆角应用于OpenLayers地图，并发现它适用于Firefox，但不适用于Chrome。我发现了一个相关的问题Openlayer map with rounded corners，它将我与另一个问题CSS Border radius not trimming image on Webkit联系起来，后者解释说Google Chrome不会将圆角应用于孙子图像。

然而，在测试我是否可以直接将它应用于孩子时，我发现了一种奇怪的行为。如果我打开chrome，并测试代码，它会给出错误的行为（图像没有所需的圆角），但是当我转到Developer工具时，鼠标悬停在元素选项卡上（突出显示各种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; 
}

这是一个错误吗？无论如何都可以让Google Chrome在不使用开发人员工具的情况下应用这种风格吗？

Answer 1

尝试将display: block;添加到其他div。它似乎适用于jsfiddle。

Chrome：CSS样式仅在您使用Google Developer工具时应用

1 个答案: