google-chrome - Chrome: CSS スタイルは、Google 開発者ツールに移動したときにのみ適用されます

Question

OpenLayers マップに角丸を適用しようとしましたが、Firefox では機能しますが、Chrome では機能しないことがわかりました。関連する質問Openlayer map with rounded cornersを見つけて、別の質問CSS Border radius not trimming image on Webkitにリンクしました。これは、Google 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; 
}

これはバグですか？開発者ツールに行かずにGoogle Chromeにスタイルを適用させる方法はありますか?

Answer 1

他のdivに追加display: block;してみてください。jsfiddleで動作するようです。