Question

我在网站上添加了一个Google Translator小部件（使用此处提供的代码：http://translate.google.com/translate_tools），并出现以下问题：

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

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标签上有内联样式。

Google翻译脚本相当激进，我没有看到任何禁用此功能的方法。

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

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

Answer 6

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

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

我能看到解决此问题的唯一方法是在代码上设置500ms的超时以重置body min-height属性。如果你不打扰你的页面在负载上跳了几秒钟，那就行了。使用jquery，它看起来像这样：

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

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

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

8 个答案: