鉻和IE佈局差異問題

Question

我只是有一些奇怪的佈局問題之間的IE瀏覽器和Chrome瀏覽器，我可以讓它看起來體面的一個，但不是其他。使用CSS移動下拉菜單欄可以讓它在Chrome瀏覽器上看起來很棒，但是移動其中一個欄到IE中頁面的中間位置。我不是網頁編程/佈局的最佳人選，所以我可能會錯過一些小的/簡單的東西。附在問題的圖片上。

IE-PROD

鉻PROD

IE-DEV（改變）

鉻DEV（改變）

僅我已經作出這樣的變化遠到Css，在這裏它們是： （頂部下拉菜單）

#searchbar { 
    margin: 3px 0; 
    padding: 3px 0; 
    width: 190px; 
    clear: left; 
} 

/*translate element*/ 
#google_translate_element { 
    color: transparent; 
} 

到：

#searchbar { 
position:relative; 
    top: 15px; 
    right: -10px; 
    margin: 3px 0; 
    padding: 3px 0; 
    width: 190px; 
    /*clear: left;*/ 
} 

/*translate element*/ 
#google_translate_element { 
position: relative; 
left: -310px; 
    color: transparent; 
} 

相關HTML/ASCX代碼如下（PROD的/ dev之間沒有變化）（鏈接移除）：

<div id="container"> 

<div class="skin-header"> 

<!-- Begin Accessibility Links --> 
    <ul class="accesslinks"> 
     <li><a href="#navigation" accesskey="n">Go to Site Links</a></li> 
     <li><a href="#maincontent" accesskey="s">Skip to Page Content</a></li> 
     <li><a href="http://r" accesskey="h">Go to Home Page</a> </li> 
     <li><a href="mailto:email" accesskey="0">Email Webmaster</a></li> 
    </ul> 
<!-- End Accessibility Links --> 



<div class="skin-header_left"> 

<h2>header</h2> 
<h3 class="motto">Building a Better tomorrow</h3> 
</div> 

<div class="skin-header_right"> 

    <div id="header_icons"> 
    <a href="http://mai" title="check your email"><img 
    src="/images/ch" alt="staff check email" /></a> 
    <a href="http://w" 
    title=" facebook page" rel="external"><img src="/images/facebook1.png" 
    alt="facebook page" /></a> 
    <a href="http://tw" title=" twitter" rel="external"><img 
    src="/images/twitter1.png" alt=" tweets" /></a> 
    <a href="http://www.youtube.com" title=" on youtube" rel="external">  
    <img src="/images/youtube1.png" alt=" youtube" /></a> 
    <a href="http://r" title=" news rss feed" 
    rel="external"><img src="/images/rss1.png" alt=" rss feed"/></a> 
    </div> 

<div id="searchbar"> 
    <dnn:SEARCH runat="server" id="dnnSEARCH" CssClass="search"  UseDropDownList="true" Submit="<img src=&quot;images/search.gif&quot;  border=&quot;0&quot; alt=&quot;Search&quot; /&gt;" /> 
</div> 

<!-- google tranlation widget code March 23, 2015 --> 

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

<!-- google tranlation widget code March 23, 2015 --> 


</div> 

Answer 1

事實證明，使用這種語法來放置谷歌翻譯器對於兩種佈局的效果都好得多，根本不需要進行CSS更改。

<!-- google tranlation widget code March 23, 2015 --> 

<div style="display:block;clear:both;"><div id="google_translate_element"> </div><script type="text/javascript"> 
function googleTranslateElementInit() { 
    new google.translate.TranslateElement({pageLanguage: 'en'},  'google_translate_element'); 
} 
</script><script type="text/javascript"  src="//translate.google.com/translate_a/element.js? cb=googleTranslateElementInit"></script> 
</div> 

<!-- google tranlation widget code March 23, 2015 -->