Internet Explorer 9和Firefox的CSS佈局樣式兼容性問題

-1

這是我當前使用的佈局的CSS代碼。這是谷歌Chrome和Opera完全兼容，但這是不同步的Firefox 11和Internet Explorer的Internet Explorer 9和Firefox的CSS佈局樣式兼容性問題

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

body { 
    font-family: Arial, Helvetica, Verdana, Sans-serif; 
    font-size: 12px; 
    color: Black; 
} 

.hidden { 
    display: none; 
} 

#page-container { 
    width: 100%; 
    margin: auto; 
} 

#main-nav { 
    background: #6e98ba; 
    height: 58px; 
} 

#main-nav dl { margin: 0; padding: 0; border: 4px solid #6e98ba;} 

#main-nav dt { float: left;} 

#main-nav dt a { 
    display: block; 
    height: 0px; 
    padding:50px 0 0 0; 
    overflow: hidden; 
    background-repeat: no-repeat; 
} 

#main-nav dt a:hover { background-position: 0 -50px;} 
#main-nav dt#home, #main-nav dt#home a { width: 90px; background-image: url();} 
#main-nav dt#lncrna, #main-nav dt#lncrna a { width:89px; background-image: url();} 
#main-nav dt#rbps, #main-nav dt#rbps a { width:151px; background-image: url();} 
#main-nav dt#interaction, #main-nav dt#interaction a { width:102px; background-image: url();} 
#main-nav dt#downloads, #main-nav dt#downloads a { width:102px; background-image: url();} 
#main-nav dt#references, #main-nav dt#references a { width:102px; background-image: url();} 

#header { 
    height: 100px; 
} 

#sidebar-a { 
    float: right; 
    width: 280px; 
    line-height: 18px; 
} 

#sidebar-a .padding (
    padding:25px; 
} 

#content { 
    margin-right: 280px; 
    line-height: 18px; 
} 

#content .padding { 
    padding: 25px; 
    margin-right: 280px; 
} 

#footer { 
    clear: both; 
    font-family: Tahoma, Arial, Helvetica, Sans-serif; 
    font-size: 11px; 
    color: Black; 
    border: 2px solid #3d7bc1; 
    padding: 13px 25px; 
    line-height: 18px; 
} 

#footer #altnav { 
    width: 350px; 
    float: right; 
    text-align: right; 
} 

#footer a { 
    color: Black; 
    text-decoration: none; 
} 

#footer a:hover { 
    color: #db6d16; 
} 

#header h1 { 
    margin-left: 10px; margin-top: 5px; margin-bottom: 0; margin-right: 0; padding: 0; color: #0996d7; 
} 

#content h2 { 
    margin: 0; 
    padding: 0; 
    padding-bottom: 15px; 
} 

#content p { 
    margin: 0; 
    padding: 0; 
    padding-bottom: 15px; 
}

頁腳邊框沒有顯示鏈接的顏色不顯示的顏色與標題文本不是我所設定的，任何有關這方面的建議或修正都會受到高度讚賞。至於問這裏是一個示例HTML代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <script type="text/javascript" src="jquery.js"></script> 

     <style> 
      input[type="text"] {margin: 0; padding: 4px; border: 2px solid #3d7bc1; border-radius: 5px;} 
      input[name="bla"] { 
       margin: 0; 
       padding: 4px; 
       border: 2px solid #3d7bc1; 
       border-radius: 5px; 
      } 
      input[type=text]:focus { 
       border-color: orange; 
       box-shadow: 0px 0px 25px -2px #333; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="page-container"> 
      <div id="header"><h1>bla</h1> 
       <center> 
        <form style="display:inline" name=rna method="POST" action="http://localhost/searchengine.php"> 
        <input id="search" name="search" placeholder="Search" type="text" value="" size="100" style="margin-bottom:0;"> 
        <input class="button" name="Submit" type="Submit"><br> 
        <input name="search" type="Radio" value="1" align="left" id="bla" checked><label for="bla">bla<label> 
        <input name="search" type="Radio" value="2" align="left">bla</form> 
      </div> 
      <div id="main-nav"> 
       <dl> 
        <dt id="home"><a href="http://localhost/home.html">Home</a></dt> 
        <dt id=""><a href="http://localhost/bla.html">bla</a></dt> 
        <dt id=""><a href="http://localhost/bla.html">bla</a></dt> 
        <dt id=""><a href="#">bla</a></dt> 
        <dt id=""><a href="#">bla</a></dt> 
        <dt id=""><a href="#">bla</a></dt> 
       </dl> 
      </div> 
     </div> 

     <div id="content"> 
      <div class="padding"> 
       <h2>About</h2> 
       <p><strong>beam</strong> </p> 
       <p></p> 
      </div></div> 

      <div id="footer"> 
       <div id="altnav"> 
        <a href="#">About</a> - 
        <a href="#">Services</a> - 
        <a href="#">Contact Us</a> 
       </div> 
       Copyright © bickering and lime 

       Powered by <a href="#">bla</a> and 
       <a href="#"></a> 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-05-26 FoldedChromatin

如果可以在[jsfiddle]（http://jsfiddle.net/） – albin

上添加一個例子，在這裏添加你的'HTML'代碼就會容易一些。 – Sajmon

http://jsfiddle.net/DLxUp/這是html代碼和css代碼和結果請看看 – FoldedChromatin

這裏有一個錯字：

#sidebar-a .padding (
    padding:25px; 
    }

這應該是：

#sidebar-a .padding { 
    padding:25px; 
    }

的Firefox web console是發現這種錯誤的一個有用的工具。每當你有疑問，打開它的CSS選項選中，它會列出所有無法解釋的選擇器。

來源

2012-05-26 10:50:06 Denis

好！謝謝我會這樣做！ – FoldedChromatin

Internet Explorer 9和Firefox的CSS佈局樣式兼容性問題

回答

相關問題