背景：进行响应式重新设计。normalize.css 用于重置。使用这种技术将 DFP 广告插入到 div 中。广告容器 div 的隐藏取决于窗口大小，并且广告 iframe 仅插入一次非隐藏 div。我还有一个站点徽标 div，.brand，它是否隐藏取决于宽度。广告 div 容器 .ta 和徽标容器 .brand 都包含在名为 .secondnav 的 div 中。所有三个 div 的高度均为 90 像素。.brand、#ldr 和 .ta 都是 display:inline-block。
当 .brand 为 display:none 时，.ta 包含的 #ldr div 中的 iframe 广告完美地位于 90px 的高度内。
当窗口稍微大一点并且 .brand 变成 display:inline-block 时，.ta 突然被下推了大约 4-5 个像素。它们仍然并排，但广告突然降低了几个像素。
我看不出是什么推动了它。我认为这可能是 div 与广告的 iframe 交互的方式，但为什么它只发生在另一个 inline-block div 旁边时？
这是CSS：
.brand {
width:200px;height:90px;
background:#660000 url('/dh5.svg') no-repeat left top;
display:inline-block
}
.multiplebgs .brand {
width:200px;height:90px;
background-color:#fff;
background-image:url(/dh5.svg),url(/dhw.svg);
background-position:0 0,30px 0;
background-size:30px,170px;
background-repeat:repeat-y,repeat-y;
display:inline-block
}
.ta {
height:90px;
display:inline-block
}
.secondnav {
height:90px;
background:url('/fs.jpg') 0 0 repeat
}
#ldr {
background:blue;
width:728px;height:90px;
display:inline-block
}
#mldr {
background:yellow;
width:320px;height:50px;
display:inline-block
}
#smallban {
background:green;
width:468px;height:60px;
display:inline-block
}
这是html：
<div class="secondnav">
<div class="brand"></div>
<div class="ta">
<div id="ldr" class=
"adslot hidden-phone hidden-tablet visible-desktop" data-dfp=
"728x90"></div>
<div id="mldr" class=
"adslot hidden-desktop hidden-tablet visible-phone" data-dfp=
"320x50"></div>
<div id="smallban" class=
"adslot visible-tablet hidden-phone hidden-desktop" data-dfp=
"Smallbanner"></div>
</div>
</div>
不确定我是否可以在我的测试页面中包含一个 URL，以便您可以看到这一点。将对其进行编辑并包括一个，如果它是犹太洁食的话。谷歌会更多关于 iframe 对齐，但我想我会在这里问。谢谢。
我的测试在这里：http ://www.digitalhit.com/bptest/index.shtml该问题出现在.brand 旁边有广告的任何尺寸。例如 480px、600px、1024px 或更高。请忽略花哨的颜色，以便在我测试设计时清楚地看到 div。