谷歌翻译正在删除CSS

Question

我已使用以下内容将googles translate app添加到网站 代码

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    autoDisplay: false,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}

</script><script src="//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"></script>

该应用似乎适用于几种语言。转换为其他时 所有css的语言都被删除了。

我正在关注特定元素（例如标题中的li或div），然后运行翻译。我可以看到应用程序没有更改标题脚本（即css）或元素。只是风格不再适用（萤火虫告诉我'这个元素没有样式规则'）

问题出在Firefox上，但不是Chrome或Opera。

有什么想法在这里发生了什么？

Answer 1

如果其他人有同样的问题 -

压缩css文件的php是为脚本添加标题所以

<link title="Default" media="screen" type="text/css" href="/modules/pd_smoothgallery/jd.gallery.css" rel="stylesheet">

正在改为

<link title="Par défaut" media="screen" type="text/css" href="/modules/pd_smoothgallery/jd.gallery.css" rel="stylesheet">

我删除了标题，翻译适用于所有语言。

（不确定为什么萤火虫没有强调这种改变，但事实并非如此）。

Answer 2

#google_translate_element span{
     color:white!important;
     font-size:15px;
     border-left:1px solid transparent!important;
     line-height: 22px;
 }  
 .goog-te-gadget-simple {
    background-color: #5191CD !important;
     border-left: 1px solid transparent !important; 
     border-top: 1px solid transparent !important; 
    border-bottom: 1px solid transparent!important; 
    border-right: 1px solid transparent !important;
 } 
 .goog-te-gadget-icon {
     margin-left: 0px; 
     margin-right: 0px; 
    width: 0px!important; 
     height: 0px !important; 
    border: none; 
     vertical-align: middle; 
}