黄色矩形部分遮挡了移动设备上的 AdSense 广告答案

【问题标题】：Yellow rectangle partially obscuring AdSense ads on mobile黄色矩形部分遮挡了移动设备上的 AdSense 广告
【发布时间】：2017-04-20 00:12:07
【问题描述】：

在我的网站上，当我在移动设备上展示广告时，我的 Google AdSense 右侧出现了一个奇怪的黄色矩形：

这是我自己在黄色空间中摇晃的问号，我已经填充了背景以使其更加突出。

我已经通过 Chrome 开发者工具窗口检查了样式，但我在样式层次结构中找不到任何设置为黄色的东西，而且我主要使用沼泽标准 minileven WordPress 提供的主题。这可能是什么原因造成的？我怎样才能纠正CSS来摆脱这个？广告在桌面版上看起来不错，只有移动版。

一个典型的页面是this one。

【问题讨论】：

标签： css adsense

【解决方案1】：

查看您的网站并查看广告我确实看到了一些额外的间距（我查看的与您屏幕截图中的不同）当我查看 DOM 时，这是导致额外间距的代码：

<td class="rh000c">
   <div class="rh-box-empty rh000"></div>
</td>

这里是相关的 CSS：

.rh000c {
    height: 102px;
    padding: 0;
    width: 2px;
}

.rh000 {
    background-color: #ffffff;
    display: inline-block;
    height: 102px;
    overflow: hidden;
    padding: 0;
    width: 2px;
}

出于某种原因，该广告将此代码传递到其iframe，因此我认为您可以做很多事情来删除它。（好吧，可能有一些方法可以删除此代码，但如果这样做，您可能会违反与广告代理商的服务协议）

如果我是您，我会联系您正在使用的广告公司（您似乎正在使用 Google Ads）并直接向他们询问此问题。希望对您有所帮助。

【讨论】：

哦，我明白了。但是 Google 一直在为我提供 bum CSS 似乎很奇怪。我不能说我在其他任何网站上都注意到过这种效果。

【解决方案2】：

我又仔细研究了这个问题，出于某种原因there is a rule like this：

embed, iframe, object {
    width: auto;
}

由于某种我无法解决的原因，这覆盖了显式的<iframe width="320"，因此通过反复试验，我发现将其添加到我的自定义 CSS 中：

.mobile-theme .adsbygoogle iframe {
    width: inherit;
}

覆盖width: auto;，我现在不再有我的黄色边框。底部的链接小部件仍然有一点难看的黄色边框，但至少不会遮挡任何东西，所以我暂时忽略它......

【讨论】：

嗯，很好的发现。如果 iframe 显示边框，您应该可以通过将 border: 0 none; 添加到您的嵌入、iframe、对象调用来摆脱它。 See this post hereIMO 这可能值得与广告公司讨论。这些首先显示出来似乎很奇怪。