防止谷歌翻译将 html 的高度更改为 100%答案

【问题标题】：Prevent Google Translator from changing height of html to 100%防止谷歌翻译将 html 的高度更改为 100%
【发布时间】：2011-04-03 12:43:26
【问题描述】：

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

它会自动为html标签添加一个样式属性，其值包括：

height: 100%

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

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

【问题讨论】：

标签： google-translate css

【解决方案1】：

这应该有效：

html {
  height: auto !important;
}

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

【讨论】：

【解决方案2】：

这解决了问题：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

我刚刚在darcyclarke.me/dev/watch 尝试了手表插件的演示，它杀死了我的浏览器。看起来它将某些东西放入无限循环中。不过这是个好主意。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我可以通过将 css 中的 body min-height 属性设置为 !important 来解决这个问题。

body {
min-height: 0 !important;
}

更新 - 不幸的是，这不再有效。谷歌翻译脚本会剔除你为对抗它的 min-height 风格所做的任何尝试。我的样式表中有上述 CSS 和 body 标记上的内联样式。

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

【讨论】：

查看我的评论以获得解决方案:)

【解决方案7】：

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

【讨论】：

【解决方案8】：

也许是这样的

body{ height: auto !important; }

【讨论】：