2

I have been building a forum using mybb. I have used Adsense to incorporate a couple of advertisements into the site but they are not displaying correctly in IE8. They look fine in IE10 (and IE8 when in compatibility mode), Chrome and Firefox. The issue is that the advertisements in IE8 appear to be misaligned by 1 or 2 pixels.

In development mode, I have identifed a line which I believe is created by Adsense as it's not part of my original code, which appears to cause the issue.

It is display: inline-table. If I uncheck this, the ads on the site appear aligned with the content. But as this is a dynamically created bit of code, I can't edit it... (or can I?)

Can anyone help me resolve this issue and get my advertisements in line with the rest of my content?

Edit:

The code I get from Google Adsense is:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ShowThreadSideSquare -->
<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:200px"
     data-ad-client="ca-pub-6454993037050681"
     data-ad-slot="7524464050"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

When I look at it through the development screen in IE, it has expanded to much more, but this is the line with the inline-table comment which seems to make it unaligned in IE8. But I can't seem to edit it as it's not in my source code...

<ins style="width: 200px; 
          height: 200px; 
          padding-top: 0px; 
          padding-right: 0px; 
          padding-bottom: 0px; 
          padding-left: 0px; 
          margin-top: 0px; 
          margin-right: 0px; 
          margin-bottom: 0px; 
          margin-left: 0px; 
          border-top-color: currentColor; 
          border-right-color: currentColor; 
          border-bottom-color: currentColor; 
          border-left-color: currentColor; 
          border-top-width: medium; 
          border-right-width: medium; 
          border-bottom-width: medium; 
          border-left-width: medium; 
          border-top-style: none; 
          border-right-style: none; 
          border-bottom-style: none; 
          border-left-style: none; 
          display: inline-table; 
          visibility: visible; 
          position: relative;">
4

3 回答 3

0

我要解决这个问题是获取代码并将其放入 adiv并将样式添加到 div 以便 div 对齐。它应该足够分离代码以使其自身对齐。

如果您提供 JSFiddle，我可能会为您提供更多帮助，但我认为您有大致的想法。

于 2013-10-11T20:27:44.610 回答
0

在您从 Google Adsense 获得的代码中，您应该将样式更改为：

<ins style="display:inline-block;width:200px;height:200px" > </ins>

至：

<ins style="display:inline-block;width:200px;height:200px; margin:0 auto;" > </ins>

您展示的第二组代码是 IE(8) 如何在兼容模式下呈现 HTML/CSS，您需要指定浏览器应如何显示 HTML，如果您不指定某些属性，则它们不会自动被分配，一些浏览器会假设某些事情。

于 2014-05-20T15:05:07.590 回答
0

我知道这已经很老了，但是我遇到了同样的问题，这就是解决方案..

只需将其添加到您的 CSS 文件中，这将覆盖导致问题的内联表。

ins
{
display: inline-block !important;
}
于 2016-02-14T22:23:06.673 回答