阻止 Google Translator 将 html 高度更改为 100%

Question

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

它自动向 html 标记添加一个 style 属性，其值包括：

height: 100%

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

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

Answer 1

这解决了这个问题：

/* Google Translate Overrides */
html, body{
    min-height: 0!important;
    height: auto!important;
    position: inherit!important;
}

Answer 2

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

body {
min-height: 0 !important;
}

更新 - 不幸的是，这不再有效。 Google 翻译脚本将删除您为对抗其 min-height 风格所做的任何尝试。我的样式表中有上述 CSS，body 标签上有内联样式。

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

Answer 3

这应该有效：

html {
  height: auto !important;
}

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

Answer 4

也许就像

body{ height: auto !important; }

Answer 5

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

Answer 6

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

body { position:static !important; min-height:100%; top:0; }

Answer 7

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

插件： 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'
                });
            }
        });
});

Answer 8

我认为解决这个问题的唯一方法是在代码上设置 500 毫秒的超时来重置 body min-height 属性。如果您不介意页面在加载时跳跃半秒，那么它就可以了。使用 jquery，它看起来像这样：

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

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