2011-08-23 65 views
1

爲什麼所有IE瀏覽器和AOL瀏覽器都在屏幕左側顯示我網站的內容,忽略了我的CSS聲明,而Opera,FF,Flock和Chrome正確顯示內容?爲什麼IE忽略我的CSS,我該如何解決它?

網站:http://www.mbc-fw.org

CSS

/* CELTIC CHALLENGE THEME BY PASTOR RICK */ 
*{font-family:verdana,tahoma,arial;} 

/* REMOVES THE SIDE PAGE MARGINS AND SETS BACKGROUND COLOR */ 
body{background:#FEFEFE;color:#000;font:700 14px verdana,tahoma,arial;margin:0;} 

/* MULTI-PART LAYOUT */ 
#container{margin:0;padding:0;} 
#bgtl{background:url(http://www.rbbt.net/skins/PR/celtic/cc-tl.gif) no-repeat left top;height:37px;margin-top:-15px;} 
#bgtr{background:url(http://www.rbbt.net/skins/PR/celtic/cc-tr.gif) no-repeat right top;height:37px;margin-top:-37px;} 
.bgtmid{background:url(http://www.rbbt.net/skins/PR/celtic/cc-tmid.jpg) repeat-x center 0;height:15px;margin:0 auto;} 
#bgtlc{background:url(http://www.rbbt.net/skins/PR/celtic/cc-tlc.gif) no-repeat left top;height:35px;margin-top:0;} 
#bgtrc{background:url(http://www.rbbt.net/skins/PR/celtic/cc-trc.gif) no-repeat right top;height:35px;margin-top:-35px;} 
#bgleft{background:url(http://rbbt.net/skins/PR/celtic/bg-left.gif) left top repeat-y;font-size:12px;margin:0;min-height:100%;overflow:hidden;} 
#bgright{background:url(http://rbbt.net/skins/PR/celtic/bg-right.gif) right top repeat-y;font-size:12px;margin:0 0 -1000px;min-height:100%;padding-bottom:1000px;} 

/* SET UP FOR CHURCH NAME AND LEFT-RIGHT LOGO IMAGES */ 
#banner{margin:0 auto;width:90%;} 
#lbox{background:url(http://mbc-fw.org/images/mbc-fw-logo.gif) no-repeat left top;height:160px;margin-left:5px;} 
#mbox{margin:0 202px;} 
#rbox{background:url(http://mbc-fw.org/images/mbc-fw-logo.gif) no-repeat right top;height:160px;margin-right:5px;margin-top:-160px;} 

/* SET UP FOR CHURCH ADDRESS, LOGO TEXT, AND PASTOR'S NAME */ 
#logobox{background:#a1b1c1;margin:0 auto;width:100%;} 
#lbin{background:#a1b1c1;line-height:30px;margin-left:5px;text-align:left;vertical-align:middle;} 
#mbin{background:#a1b1c1;font-style:italic;line-height:30px;margin:-30px 0;text-align:center;vertical-align:middle;} 
#rbin{background:#a1b1c1;line-height:30px;margin:-30px 5px 0 0;text-align:right;vertical-align:middle;} 

/* SET UP FOR TWO COLUMNS OF TEXT */ 
#columns {background:#FEFEFE; margin:0 auto;width:90%; overflow: auto;} 
#rightcolumn{margin: 10px 0; float: right; width: 48%; font:400 14px verdana,tahoma,arial; line-height: 1.4em;} 
#leftcolumn{margin: 10px 0; float: left; width: 48%; font:400 14px verdana,tahoma,arial; line-height: 1.4em;} 

#backtotop{background:url(http://www.rbbt.net/skins/PR/celtic/cc-fountain.gif);border:0;font:700 14px verdana;height:100px;line-height:20px;margin:5px auto 0;padding:0;width:100px;} 

/* PD MENU */ 
#holder{height:33px;line-height:33px;overflow:hidden;position:absolute;right:58px;text-align:center;top:35px;width:225px;z-index:100;} 
#holder:hover{cursor:pointer;height:350px;} 
#holder a:visited,#holder a{background:#339;border:1px solid #77f;color:#A39B9B;display:block;line-height:18px;text-decoration:none;width:99%;} 
#holder a:hover{background:#007;color:#fff;} 
#holder p{background:#007;border:1px solid #77f;color:#fff;font:400 14px verdana;margin:-1px 0;padding:0;} 
+1

「AOL瀏覽器」 ಠ_ಠ – BoltClock

回答

3

我沒有IE瀏覽器方便的測試,但你的文檔類型(HTML 4.01過渡,沒有URI)的選擇觸發怪癖模式。這會導致瀏覽器之間出現很多不一致,包括IE如何處理width

確保您觸發standards mode

+0

你是天才!我改變了Doctype以反映過去幾年我在Runboard.com上一直在使用的內容,現在IE8-IE10展現並行動起來就像我的CSS告訴它的那樣。 IE7幾乎是正確的,可用。 IE6仍然是一個失敗的原因,我是否應該將自己的頭靠在牆上以使其工作? –

+2

將你的頭靠在牆上不會讓IE 6工作。 –

相關問題