隐藏Google翻译栏

Question

我有以下代码：

<div style="" class="skiptranslate">
  <iframe frameborder="0" style="visibility:visible" 
          src="javascript:''" 
          class="goog-te-banner-frame skiptranslate" 
          id=":2.container"></iframe>
</div>

我需要隐藏它，但如果我只使用以下命令隐藏goog-te-banner-frame：

.goog-te-banner-frame {
    display:none !important
    }

它仍然把我的头往下扔。如果我使用这个：

.skiptranslate {
    display:none !important
    }

它还隐藏了语言选择下拉列表，因为它共享相同的类。我想隐藏包含goog-te-banner-frame的skiptranslate div。

我该怎么做？

编辑:这是“创建”上面的翻译div的实际代码：

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', 
        layout:     google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: false, 
        includedLanguages: ''}, 'google_translate_element');}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 1

好吧，这是有原因的：

.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
body {
    top: 0px !important; 
    }

Answer 2

选择的答案错误！

我知道这是一个老问题，但是对于将来遇到这个问题的任何人来说，最简单的方法是：

body > .skiptranslate {
    display: none;
}

由于iframe是直接动态添加到正文中的，因此您只能简单地选择直接后代，而不能选择更深层次的内容。

Answer 3

尝试添加另一个类，例如.myClass {display: none;}，附加到skiptranslate，如class="skiptranslate myClass"

编辑：

另一种解决方案是:还可以用另一个div包装google translate代码，比如<div id="google-wrapper">... google translate code...</div>，然后用display: none;设置包装器的样式

或

看看这个小提琴：http://jsfiddle.net/SryPD/