7

我向网站添加了一个谷歌翻译小部件（使用此处提供的代码：http: //translate.google.com/translate_tools）并遇到以下问题：

它会自动将样式属性添加到 html 标记，其值包括：

height: 100%

这是“破坏”页面布局。例如，定位到“底部”的 CSS 背景图像现在（错误地）位于视口的底部。

有什么方法可以防止或解决这个问题吗？

4

8 回答 8

3

这解决了这个问题：

/* Google Translate Overrides */
html, body{
    min-height: 0!important;
    height: auto!important;
    position: inherit!important;
}
于 2014-03-20T19:30:38.343 回答
1

这应该有效： 

html {
  height: auto !important;
}

body {
  position: initial !important;
  min-height: initial !important;
  top: auto !important;
}

于 2015-03-28T17:15:57.330 回答
1

我可以通过将 CSS 中的 body min-height 属性设置为 !important 来解决这个问题，以防止覆盖。

body {
min-height: 0 !important;
}

更新- 不幸的是，这不再有效。谷歌翻译脚本会去掉你为对抗它的最小高度风格所做的任何尝试。我的样式表中有上述 CSS 和 body 标签上的内联样式。

谷歌翻译脚本非常激进，我没有看到任何禁用它的方法。

于 2010-12-24T17:30:30.837 回答
0

我能看到解决这个问题的唯一方法是在代码上设置 500 毫秒的超时时间来重置 body min-height 属性。如果您不想担心页面在加载时会跳动半秒钟，那么它可以工作。使用 jquery，它看起来像这样：

$(function(){
  var myMinHeight = 950;
  setTimeout(function(){$('body').css('min-height',myMinHeight)},500);
});

将 myMinHeight 的值设置为您希望的任何值。

于 2013-12-17T12:50:06.193 回答
0

我尝试使用其他答案提供的解决方案，但它们对我不起作用。如果其他人遇到这个问题，我确实在这个解决方案上取得了成功。

body { position:static !important; min-height:100%; top:0; }
于 2012-08-02T19:41:16.877 回答
0

也许就像

身体{高度：汽车！重要；}

于 2010-12-24T17:53:14.343 回答
0

不要在头部写入css，写入css文件。这将阻止谷歌自动翻译。

于 2011-06-20T12:10:09.800 回答
0

我找到了解决这个问题的方法，我猜它不是防弹的，但现在可以使用：

插件： http ://darcyclarke.me/dev/watch/

使用此代码:)

$(window).load(function(){
        $('body').watch('min-height', function(){
            var style = parseInt($('body').css('min-height'));
            if(style > 0){
                $('body').css({
                'min-height' : '0',
                'position' : 'static',
                'top' : 'none'
                });
            }
        });
});
于 2012-12-10T17:49:24.053 回答