浮动时,地图会隐藏

时间:2017-08-14 12:58:16

标签: html css google-maps google-chrome

当google地图iframe向右浮动时,它会显示,然后隐藏在Google Chrome中。它似乎被javascript隐藏,当它无法完全显示时,包括它的边距,虽然保证金不会隐藏它的任何部分。这真的是一个功能还是一个bug?

<div class=parent>
  <p>
  <iframe class=child allowfullscreen="" frameborder="0" height="250" src="http://via.placeholder.com/200x200" style="border:0" width="300" onload="debugger"></iframe>
  </p>
  </div>

  <div class=parent>
  <p class=hide-seek>
  <iframe class=child allowfullscreen="" frameborder="0" height="250" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d405544.556384143!2d6.6402125!3d61.7258614!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2s!4v1502714127200" style="border:0" width="300"></iframe>
  </p>
  </div>
<br>
<input type=button value="Toggle Maps">

.parent {
  overflow: hidden;
  background-color:red;
  height:280px;
}
.parent p {
  margin:0;
  height:260px;
  overflow:hidden;
}
.parent p.hide-seek {
   height:250px;
}    
.parent:nth-child(2)
{
  background-color:blue;
}
iframe {
  float:right;
  margin-bottom: 1px;
}

http://jsbin.com/zixajetivi/edit?html,css,js,output

0 个答案:

没有答案