如何使一個css所有的瀏覽器

header

這是代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" href="css/base1.css"> 
     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="lib/js/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="lib/js/jquery-ui-1.8.21.custom.min.js"></script> 
     <title>Crociere sul web - Ricerca avanzata</title> 
    </head> 
    <body> 
     <div id="header"> 
      <div id="header_content"> 
       <div id="text"> 
        NAME OF COMPANY 
       </div> 
       <div id="header_prenotazioni"> 
        My prenotation 
       </div> 
       <div id="header_phone"> 
        <img id="phone" src="images/logo/logo_phone.png" /><b>xxxxxxxxxx</b> 
       </div> 
       <script> 
        (function(d, s, id) { 
          var js, fjs = d.getElementsByTagName(s)[0]; 
          if (d.getElementById(id)) 
           return; 
          js = d.createElement(s); 
          js.id = id; 
          js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1"; 
          fjs.parentNode.insertBefore(js, fjs); 
         }(document, 'script', 'facebook-jssdk')); 
       </script> 
       <div class="fb-like" data-href="https://www.facebook.com/xxxx" data-send="true" data-layout="button_count" data-width="20" data-show-faces="false" data-font="verdana"></div> 
       <div id="area_agenzie"> 
        <div align="center"> 
         AGENCY AREA 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

這是CSS：

html, body { 
    margin: 0; 
    padding: 0 
} 

div#header { 
    width: 100%; 
    background-color: #0170a8; 
    color: white; 
    font-size: 9px; 
    font-family: Verdana; 
    overflow: hidden; 
} 
div#header_content { 
    margin: 0 auto; 
    width: 90em; 
    overflow: hidden; 

    padding-bottom: 4px; 
    padding-top: 4px; 

} 
div#text{ 
    float:left; 
} 

div#header_prenotazioni { 
    margin-left: 100px; 
    border-left: 1px dotted white; 
    border-right: 1px dotted white; 
    padding-left: 6px; 
    float:left; 
    padding-right: 6px; 

} 
div#header_phone { 
    margin-left: 10px; 
    font-size: 11px; 
    border-right: 1px dotted white; 
    padding-right: 6px; 
    float:left; 
} 
div#header_phone img { 
    vertical-align: middle; 
} 
div#area_agenzie { 
    background-color: #b5c85f; 
    color: #0170a8; 
    height: 20px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font-size: 11px; 
    display: inline-block; 
    vertical-align: top; 
} 
div#area_agenzie div { 
    margin-top: 3px; 
    padding-left:2px; 

    padding-right:2px; 

}

我的問題是，與IE不兼容.. AGENCY AREA繼續下一行...我該如何解決它？有人能幫我嗎？謝謝！！！

來源

2012-07-06 JackTurky

Internet Explorer出現問題是正常的和預期的。不要覺得太糟糕。這是全球最糟糕的瀏覽器，也是每個Web開發人員的焦點。 – Rob 2012-07-06 18:22:32

您好像大部分都使用float: left，最後一個使用display: inline-block。既然你有一個固定寬度的容器，看起來IE的字體渲染就足以將最後一個塊發送到下一行。

請改爲將float: left替換爲display: inline-block，而不是讓width: 90em嘗試text-align: center;。這應該使一切都顯示在一行上。

來源

2012-07-06 17:18:31

它的工作原理！但我必須將header_content的寬度設置爲95em。但div並不完全在頁面中間：/ – JackTurky 2012-07-06 17:43:18

如何使一個css所有的瀏覽器

回答

相關問題