html - Chrome中的CSS列和Google Maps列(是否显示错误？)

我有一个奇怪的问题，也许有人可以帮助我修复或理解它。我不知道这是一个错误还是有解决此问题的方法，但是我正在使用css3属性columns构建布局，并且在Firefox和Safari中一切正常，但是在Google Chrome中，地图事件（拖动）与我的其他专栏重叠，您可以在此jsfiddle http://jsfiddle.net/bcwfqxp5/或运行以下代码段中看到问题：

google.maps.event.addDomListener(window, "load", function() {
  new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
  });
});

.twoColumns {
  columns: 2;
}

.twoColumns>* {
  break-inside: avoid;
  page-break-inside: avoid;
}

.anyContent {
  display: block;
  background: yellow;
  height: 300px;
}

#map_div {
  overflow: hidden;
  position: relative;
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>

<div class="twoColumns">
  <div class="anyContent">Why can I drag here in Chrome?</div>
  <div id="map_div" style="height: 300px;"></div>
</div>

  注意：这在Firefox和Safari中可以正常运行

最佳答案

对于这些类型的布局问题，我总是首先查看HTML，并且我注意到您在同一个div中拥有两个对象，并且当我将它们分成两个div时它可以工作。

google.maps.event.addDomListener(window, "load", function() {
  new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
  });
});

.twoColumns {
float: left;
width: 50%;
}

.anyContent {
  display: block;
  background: yellow;
  height: 300px;
  z-index: 2;
}

#map_div {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>

<div class="row">
<div class="twoColumns">
  <div class="anyContent">Why can I drag here in Chrome?</div>
</div>
<div class="twoColumns">
  <div id="map_div" style="height: 300px;"></div>
</div>
</div>

关于html - Chrome中的CSS列和Google Maps列(是否显示错误？)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53859766/