如何移除Google Translate切换语言时显示的网页头部横幅？

你写的CSS无效，是因为Google翻译脚本动态加载后，横幅元素的类名会随机变化，导致固定类名选择器匹配不到目标元素。下面提供两种可靠的解决方法：

方法一：通过官方配置禁用横幅（推荐） #

直接在初始化TranslateElement时添加配置参数，指定简洁布局模式，这样不会生成顶部横幅，只保留语言选择器，这是官方支持的稳定方案。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Hi, my name is Ali Naqvi</h1>
  <div id="google_element"></div>
  <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>

  <script type="text/javascript">
    function loadGoogleTranslate() {
      new google.translate.TranslateElement(
        {
          pageLanguage: 'en', // 可根据页面原始语言修改
          layout: google.translate.TranslateElement.InlineLayout.SIMPLE
        },
        "google_element"
      );
    };
  </script>
</body>

</html>

方法二：用通用CSS选择器强制隐藏 #

如果不想修改JS逻辑，可以用匹配横幅固定特征的CSS选择器，避免因类名变化失效：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 匹配固定在顶部的Google翻译横幅 */
    body > div[style*="position: fixed"][style*="top: 0"] {
      display: none !important;
    }
    /* 移除横幅占用的顶部空间，避免页面内容偏移 */
    body {
      margin-top: 0 !important;
    }
  </style>
</head>

<body>
  <h1>Hi, my name is Ali Naqvi</h1>
  <div id="google_element"></div>
  <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>

  <script type="text/javascript">
    function loadGoogleTranslate() {
      new google.translate.TranslateElement("google_element")
    };
  </script>
</body>

</html>

内容的提问来源于stack exchange，提问作者ALi Naqvi