Question

背景：致力于响应式重新设计。 normalize.css用于重置。 DFP广告管理系统广告使用this technique插入到div中。广告容器div是隐藏的，具体取决于窗口大小，广告iframe只插入一次非隐藏div。我还有一个站点徽标div，。brand，隐藏或不取决于宽度。 ad div容器.ta和徽标容器.brand都包含在名为.secondnav的div中。所有三个div都是90 px高。 .brand，＃lld和.ta都显示：inline-block。

当.brand显示为：none时，.ta所包含的#ldr div中的iframe广告完全位于90px的高度内。

当窗口稍大且.brand变为显示时：内联块，.ta突然被推下约4-5像素。它们仍然是并排的，但突然广告的位置低了几个像素。

我看不出有什么东西可以推倒它。我认为这可能是div与广告的iframe进行交互的方式，但为什么只有在它与另一个内联块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。

Answer 1

在iFrame中试试这个：

style="border: 0px; top:0px;"

Answer 2

尽管Sergio提出了很好的建议，但我无法让它为我工作，可能是因为我无法控制来自Google的iframe广告中的HTML。返回将.brand div浮动到左侧，并将包含.brand的宽度定义的div居中，ad divs为我工作，所有内容都垂直对齐。

带显示的两个div：内联块 - 第二个div，iframe广告被向下推几个像素

2 个答案: