Google Translate Padding问题

我遇到Google Translate的填充问题。当你点击选择语言按钮并且菜单下降时，最后一行（单词）就位于IE和Chrome边框的顶部（Firefox工作正常），但是如果再次点击下拉菜单重新打开它再次填充是固定的....我无法弄清楚为什么会发生这种情况，就像它第二次输入它自动知道自己纠正。请问有人会告诉我为什么会发生这种情况？如果你对如何改正它有任何想法。Google Translate Padding问题

https://jsfiddle.net/tgokbf5j/4/

$('document').ready(function() { 
 
    $('#google_translate_element').on("click", function() { 
 

 
     // Change font family and color 
 
     $("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *") 
 
      .css({ 
 
       'color': '#687074', 
 
       'font-family': 'tahoma' 
 
      }); 
 

 
     // Change hover effects 
 
     $("iframe").contents().find(".goog-te-menu2-item div").hover(function() { 
 
      $(this).css('background-color', '#18BA9B').find('span.text').css('color', 'white'); 
 
     }, function() { 
 
      $(this).css('background-color', 'white').find('span.text').css('color', '#687074'); 
 
     }); 
 

 
     // Change Google's default blue border 
 
     $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #18BA9B'); 
 

 
     // Change the iframe's box shadow 
 
     $(".goog-te-menu-frame").css({ 
 
      '-moz-box-shadow': '0 3px 8px 2px #666666', 
 
      '-webkit-box-shadow': '0 3px 8px 2px #666', 
 
      'box-shadow': '0 3px 8px 2px #666' 
 
     }); 
 
    }); 
 
});

a.goog-te-menu-value { 
 
text-decoration:none; 
 
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
 
} 
 
a.goog-te-menu-value > span { 
 
text-transform: uppercase; 
 
} 
 
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover { 
 
\t color:#18BA9B; 
 
} 
 

 
a.goog-te-menu-value:hover span 
 
{ 
 
     color: #18BA9B !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="google_translate_element" style="float:left; padding-left:15px"></div> 
 

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

来源

2015-12-07 David Brierton

我已经将问题隔离到字体的变化。它不会再发生，因为字体已经设置了一次。我仍然没有得到它第二次正确调整 –

好吧，我想它是因为你的第一个选择器中的'*'。删除它，它工作正常。检查[这里]（https://jsfiddle.net/tgokbf5j/6/） –

'*'是代表所有的元字符。以下是对[documentation]（https://api.jquery.com/category/selectors/）的参考。从这行'$（“iframe”）。contents（）。find（“。goog-te-menu2-item div，.goog-te-menu2-item：链接div，.goog-te-menu2-item：visited div，.goog-te-menu2-item：活动div，.goog-te-menu2 *“）' –

*是元字符它代表一切。这里是对jQuery documentation的引用。从该行中删除*：

$("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")

而当你想到它应该工作。

来源

2015-12-07 18:36:01

Google Translate Padding问题

回答

相关问题