0

ページの上部にヘッダー レイヤーがあり、背景画像があります。このレイヤーには、背景画像に合わせてリンクされたテーブルがあります。背景画像の位置は jquery を使用して切り替えます。リンクのフォントは Google Webfonts を使用しています。Firefox ではすべて問題ありません。IE8 では、テーブルの内容はレンダリングされず、下にある背景画像だけが表示されます。

フォントをデフォルトに変更してみましたが、問題は解決しません。リンクはセル内のアンカー タグです。これらを に変更して、アンカー タグにさらにパラメータを割り当ててみましたが、問題は解決しません。

IE テーブルのバグを Google で検索すると、すべての結果が colspan の幅の問題です。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コードブロックが成功するのに永遠にかかりました.

4

1 に答える 1

0

解決しました。CSS プロパティは、padding-top何らかの理由で IE で異なる方法でレンダリングされます。これは CSS で 150px に設定されていましたが、IE で同じ結果を得るには半分にカットする必要がありました。

バカIE。

于 2010-11-11T17:56:45.417 に答える