2010-11-09 82 views
0

我在頁面頂部有一個標題圖層,並帶有背景圖片。這個圖層中有一個表格,其中的鏈接與背景圖片對齊。背景圖片的位置使用jquery進行切換。鏈接的字體使用Google Webfonts完成。在Firefox中一切都很好。在IE8中,表格渲染的內容都沒有,你看到的只是底下的背景圖片。IE8表格內容未呈現

我試着將字體更改爲默認值,問題依然存在。這些鏈接是單元格內的錨標籤,我嘗試將其更改爲,爲錨標籤分配更多參數,問題依然存在。

當我谷歌IE錯誤表,所有的結果是與合併單元格寬度問題。我試圖搜索與Google Webfonts相關的錯誤,但是當我將字體更改爲默認值時,它仍然沒有顯示任何內容。您的幫助表示讚賞:

相關CSS:

@import url(http://fonts.googleapis.com/css?family=Tangerine&subset=latin); 
@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=latin); 
body, html { 
margin:0px; 
padding-top:0px; 
} 
#header { 
width:792px; 
height:190px; 
overflow:hidden; 
border:1px solid #754c78; 
background-color:#754c78; 
background:url('images/header_sprite.jpg') no-repeat top left; 
} 
.header_td { 
width:132px; 
height:190px; 
padding-top:150px; 
text-align:center; 
cursor:pointer; 
} 
.link { 
font-family: 'Tangerine', serif; 
font-size: 32px; 
    text-shadow: 1px 1px 0px #ffffff; 
text-decoration:none; 
color:#754c78; 
} 
.link_over { 
font-family: 'Tangerine', serif; 
    font-size: 32px; 
    text-shadow: 1px 1px 0px #754c78; 
text-decoration:none; 
color:#ffffff; 
} 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="main.css" /> 
     <script type="text/javascript" src="jquery-1.4.2.js"></script> 
     <script type="text/javascript" src="nav.js"></script>  <title>{B&amp;E} - Contact/RSVP</title> 
    </head> 
    <body> 

     <center> 
     <div id="container"> 
         <div id="b_e"></div> 
      <div id="header"> 
       <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
        <td id="sprite1td" class="header_td" title="Welcome"><div class="link">Welcome</div></td> 
        <td id="sprite2td" class="header_td" title="Proposal"><a class="link">Proposal</a></td> 

        <td id="sprite3td" class="header_td" title="Ceremony"><a class="link">Ceremony</a></td> 
        <td id="sprite4td" class="header_td" title="Reception"><a class="link">Reception</a></td> 
        <td id="sprite5td" class="header_td" title="Registry"><a class="link">Registry</a></td> 
        <td id="sprite6td" class="header_td" title="Contact/RSVP"><a class="link">Contact</a></td> 
        </tr> 
       </table> 
      </div>   <div id="content"> 

       <div class="title">Contact</div> 
       <div class="text"><br /><br /></div> 
      </div> 
     <div id="footer"><div class="copy">&copy;<a class="credentials">&nbsp;Brandon Condrey 2010</a></div></div>  </div> 
     </center> 
    </body> 
</html> 

任何幫助你表示讚賞。

PS - 我不能讓這個降價的事情一握,即HTML代碼塊花了永遠拉斷。

+0

我想從一個單獨的編輯器複製粘貼代碼,然後選擇它,然後點擊101010按鈕,它會縮進選擇所需要的降價將其視爲代碼四個空格。 – 2010-11-09 01:53:34

+0

謝謝弗蘭克!那正是我需要的。 – 2010-11-09 01:55:43

回答

0

解決了它。由於某些原因,padding-top CSS屬性在IE中的呈現方式不同。這在CSS中設置爲150px,但爲了得到相同的結果,必須減半。

愚蠢的IE瀏覽器。