Firefox/IE上無法使用CSS樣式

Question

我設計了一個使用Dreamviewer的網站。我應用於網頁的樣式在Firefox和IE上不可用，網頁以純HTML格式顯示。但所有樣式都可以在Chrome中很好地顯示。究其原因，以及如何解決該問題？

這是我的樣式表

*  { padding:0; margin:0; border:0; } 

p { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#202020; line-height:180%;} 
h1, h2, h3, h4 { color:#00486A; font-family:Arial, Helvetica, sans-serif;} 
h1 { padding: 5px 5px 10px 0; font-size:24px;} 

#wrapper { margin:5px auto; width:1000px; background-color:#E6E6FF;} /*opacity:0.8; filter:alpha(opacity=80)}*/ 
body  { background:url(../img/backgrounds/sparkling_design-HD.jpg); background-repeat:repeat; } 
#logo  { float:left; margin:10px 5px 10px 20px; opacity:1; ;} 
#logo img { opacity:1;} 


#loginform { float:right; padding: 20px 30px 10px 10px; margin: 10px 10px; } 
#loginform a { float:right; clear:both; } 
#loginform a:link  { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; } 
#loginform a:visited { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; } 
#loginform a:active  { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; } 
#loginform a:hover  { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; text-decoration:none; text-decoration:underline;} 
#loginform a:focus  { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; } 
#loginform label { float:left; width:70px; line-height: 100%; font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; padding-top:5px;} 
#loginform input { -webkit-border-radius:5px; border-radius:5px; width:150px; line-height:180%; height:20px; margin-bottom:10px; padding-right:5px; border:1px solid #999; padding-left: 8px;} 
#loginform input[type=submit] { float:right; text-align:center; width:75px; background-color:#82BDFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-left:8px; border: 1px #999999 solid; line-height:10px;} 
#loginform input[type=submit]:hover { background-color:#0060FF; color:#FFF; } 

#topnav  { clear:both; padding:10px 5px 10px 5px; margin:5px 5px 5px 20px; border-top:1px #B7B1FE solid; border-bottom:1px #B7B1FE solid;} 
#topnav ul li { display:inline; list-style-type:none; padding-left:20px; } 
#topnav ul li a:link { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; } 
#topnav ul li a:active { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; } 
#topnav ul li a:visited { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; } 
#topnav ul li a:hover { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#7C96FC; font-weight:bold; } 
#topnav ul li a:focus { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; } 

#banner { clear:both; margin:5px 20px; width:960px;} 
#banner img { padding: 10px 0 10px 15px; } 

#content { float:left; width:700px; padding:10px 20px 10px 10px; margin:5px 5px 10px 10px; text-align:justify;} 
#rightpane { float:right; width:220px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#202020; margin-right: 20px; background-color:#D9DDFF; margin-bottom:20px; border:1px #0080C0 solid; border-radius:5px;} 

#searchbox { padding:10px 5px 10px 20px; margin-top:5px; } 
#search input[type=text] { border-radius:5px; -webkit-border-radius:5px; height: 20px; width:150px; border:1px #0080C0 solid; margin-right: 5px; } 
#search input[type=submit] { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; height:25px; width:30px; border:1px #0080C0 solid; background-color:#82BDFF; line-height:5px;} 
#search input[type=submit]:hover { background-color:#0060FF; color:#FFF; } 
#searchbox h3 { margin-left:0; } 

/*---------------------Signup page------------ */ 
#form-content { border: 1px solid #666; float:left; width:690px; padding:10px 20px 10px 10px; margin:5px 15px 10px 20px; } 
#form-add-account input[type=text], #form-add-account input[type=password] { width: 200px; height:20px; border-radius:5px; border: 1px #0080C0 solid;} 
#form-add-account label { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;} 
#form-add-account table { padding-top: 5px; } 
/*---------------------------------------------*/ 


#latest-posts { padding:10px 5px 10px 10px; margin:20px 0; } 
#latest-posts ul { list-style-type:none; padding-right:5px; padding-left:10px; line-height: 180%;} 
#latest-posts ul li a:link  { text-decoration:none; color:#202020;} 
#latest-posts ul li a:active { text-decoration:none; color:#202020;} 
#latest-posts ul li a:visited { text-decoration:none; color:#202020;} 
#latest-posts ul li a:hover  { text-decoration:none; color:#7C96FC; text-decoration:blink;} 
#latest-posts ul li a:focus  { text-decoration:none; color:#202020;} 

#recommendations { padding:10px 5px 10px 10px; margin:20px 0; } 
#recommendations ul { list-style-type:none; padding-right:5px; padding-left:10px;} 
#recommendations ul li a:link  { text-decoration:none; color:#202020;} 
#recommendations ul li a:active { text-decoration:none; color:#202020;} 
#recommendations ul li a:visited { text-decoration:none; color:#202020;} 
#recommendations ul li a:hover  { text-decoration:none; color:#7C96FC; text-decoration:blink;} 
#recommendations ul li a:focus  { text-decoration:none; color:#202020;} 

#footer  { clear:both; width:980px; margin:10px auto; border-top:2px #CCCCCC dotted; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666;} 
#footer p { font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666; } 
#footer h4 { font-size:11px; padding-bottom:4px; } 

#social-media { float:left; width:230px; margin:10px 0px 10px 30px;} 
#social-media ul { list-style-type:none; line-height:180%;} 
#social-media ul li a:link  { text-decoration:none; color:#666;} 
#social-media ul li a:active  { text-decoration:none; color:#666;} 
#social-media ul li a:visited { text-decoration:none; color:#666;} 
#social-media ul li a:hover  { text-decoration:none; color:#7C96FC; text-decoration:blink;} 
#social-media ul li a:focus  { text-decoration:none; color:#666;} 

#contacts { float:left;width:230px; margin:10px 0px 10px 120px; } 
#notice  { width:230px; float:right; margin-top:10px; } 
#footer-bottom  { clear:both; text-align:center; padding:10px 10px 20px 10px; border-top:2px #CCCCCC dotted; } 

Answer 1

我看不出有任何先進的或複雜的CSS代碼，因此所有的現代瀏覽器都支持它。總之，這裏是一個清單：

清單

• 你有沒有檢查不同的瀏覽器版本（你可以舊版本之間的Internet Explorer中切換）？檢查：http://msdn.microsoft.com/en-us/library/gg699485(v=vs.85).aspx
• 你試過更簡化的CSS嗎？
• 您是否清理了瀏覽器緩存？
• 您是否嘗試過「瀏覽器嗅探」？檢查：http://en.wikipedia.org/wiki/Browser_sniffing
• 你在另一臺電腦上試過嗎？

如果你在線測試，你可能想檢查你的.htaccess。