CSS Google 再营销代码 - iframe 高度问题

Google remarketing tag - iframe height issue

提问by Az.

I've noticed that Google's remarketing code inserts an iframe at the bottom of my page. The problem is that the iframe messes up my layout (it's 13px high and leaves a blank white vertical space at the bottom).

我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe。问题是 iframe 弄乱了我的布局（它高 13 像素，底部留有空白的垂直空间）。

I've tried to hide it with css but it's still visible in IE9:

我试图用 css 隐藏它，但它在 IE9 中仍然可见：

iframe[name='google_conversion_frame'] { 
    height: 0 !important; 
    line-height: 0 !important; 
    font-size: 0 !important; 
}

Therefore I've got two questions:

因此我有两个问题：

a) how to hide this iframe in IE9

a) 如何在 IE9 中隐藏这个 iframe

b) most importantly - is it safe or can it somehow affect the functionality of this script?

b) 最重要的是——它是否安全或者它会以某种方式影响这个脚本的功能？

回答by Simbus82

In my sites i use this code

在我的网站中，我使用此代码

iframe[name='google_conversion_frame'] { 
    height: 0 !important;
    width: 0 !important; 
    line-height: 0 !important; 
    font-size: 0 !important;
    margin-top: -13px;
    float: left;
}

Floating the iframe allows you to use negative margin equal to the height of the body inside the iframe.

浮动 iframe 允许您使用等于 iframe 内主体高度的负边距。

回答by Az.

Other way around (mentioned in the comments above) is to insert the conversion.js script tag into a hidden div:

其他方法（在上面的评论中提到）是将 convert.js 脚本标签插入到隐藏的 div 中：

<div style="display: none">
    <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">  </script>
</div>

src: http://keanrichmond.com/google-remarketing-messing-with-my-design.html

源代码：http: //keanrichmond.com/google-remarketing-messing-with-my-design.html

回答by CCreative

I had the same problem. The good solution was to add a line in the google remarketing tag.

我有同样的问题。好的解决方案是在 google 再营销标签中添加一行。

    var google_conversion_format = 3;

The tag before modification :

修改前的标签：

<!-- Code Google de la balise de remarketing -->
<script type="text/javascript">/* 
<![CDATA[ */
var google_conversion_id = 10xxxxxxxx;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
<noscript><div style="display:inline;"><img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/10xxxxxxxx/?value=0&amp;guid=ON&amp;script=0"/></div></noscript>

The tag after modification :

修改后的标签：

<!-- Code Google de la balise de remarketing -->
<script type="text/javascript">/* 
<![CDATA[ */
var google_conversion_id = 10xxxxxxxx;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;

var google_conversion_format = 3; /* ADD THIS LINE TO RESOLVE YOUR PROBLEM */

/* ]]> */

回答by ExcellentSP

DO NOT USE THOSE OVERLY COMPLICATED ANSWERS. Simply use position:fixed;on that element to take it out of the document flow.

不要使用那些过于复杂的答案。只需position:fixed;在该元素上使用即可将其从文档流中移除。

Like this:

像这样：

iframe[name="google_conversion_frame"]{
    position:fixed;
}

That's it! You keep all original functionality AND you don't have to worry about API changes.

就是这样！您保留所有原始功能，并且不必担心 API 更改。

回答by timtom

Is there any downside to just setting the iframe to be absolute positioning.

将 iframe 设置为绝对定位有什么缺点吗？

iframe[name='google_conversion_frame'] {
    position: absolute;     
    bottom: 0;
}

less code, no !important's and no display: none

更少的代码，没有 !important 并且没有显示：无

回答by Daniel

Here is my super simple minified solution:

这是我的超级简单的缩小解决方案：

/* Hide AdWords Remarketing iFrame */
iframe[name="google_conversion_frame"]{display:block; height:0;}

I tested and it works in Chrome, FireFox, and IE 10.

我测试过，它在 Chrome、FireFox 和 IE 10 中工作。

There are several ways to hide it of course, but why not have another option.

当然有几种方法可以隐藏它，但为什么没有另一种选择。

回答by Half Price Computers

I added "border: none;" as my site auto inserted a border that showed a colour even when collapsed.

我添加了“边框：无；” 因为我的网站会自动插入一个边框，即使折叠时也会显示颜色。

/* Hide AdWords Remarketing iFrame */
iframe[name="google_conversion_frame"] {
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  display: block;
}

回答by carrieat

I just used css to set the height and width to zero. Wrapped the conversion.js file around a div with an id and set its child iframe width and height to 0.

我只是使用 css 将高度和宽度设置为零。将conversion.js 文件包裹在一个带有id 的div 周围，并将其子iframe 的宽度和高度设置为0。

<div id="googleiframe">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
</div>
<style type="text/css">
#googleiframe iframe{height:0;width:0;}
 </style>

You can set the style in the main css file.

您可以在主 css 文件中设置样式。

回答by nico_castrog

iframe[name="google_conversion_frame"] {
  height: 0;
  padding: 0;
  margin: 0;
  display: block;
}