0

次の表をcaroufredsel画像ギャラリーに使用しています。IE9のテーブルのヘッダーに問題があります。テキストと画像を行の中央に配置したいと思います。

私は何が間違っているのですか？

CSSは次のとおりです。

<style type="text/css">
table.thumbstable {
    margin: 20px auto;
    width:940px;
    position: relative;
    overflow-x: hidden;
    z-index: 10;
    border: 2px solid #939598;
}
table.thumbstable tr.gallery {
    height: 160px;
    width: 860px;
}
table.thumbstable thead tr{
    height:40px;
     background-color:#e6e7e8;
}
table.thumbstable thead th span.player-wrapper a img {margin:0; padding:0;}
table.thumbstable thead th span.player-wrapper a {margin:0; padding:0;}
table.thumbstable thead th span.player-wrapper {margin:0 10px 0 0; padding:0; float:right; display:inline;}
table.thumbstable tbody {
    background-color:#f7f7f7;
    height:160px;
    border: 2px solid #000;
}
table.thumbstable th {
    text-align:left;
    padding-left:20px;
    color:#568935;
    border-bottom:2px solid #939598;
}
table.thumbstable th a.play{
    float:right;
    margin-right:10px;
}
table.thumbstable td.scroll {
    width: 60px;
    valign:center;
    text-align: center;
}
table.thumbstable td.scroll img {
    margin:0;
    padding:0;
}
#thumbs2-wrapper {
    padding: 20px 40px;
    position: relative;
    overflow-x: hidden;
    height: 160px;
    width: 860px;
    background-image: url("../images/carousel_thumb_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 10;
}

span.thumbsheadline { font-size:16px; font-family: 'Texel', sans-serif;} 
</style>

HTMLは次のとおりです。

<table class="thumbstable" cellpadding="0" cellspacing="0">
        <thead>
              <tr><th colspan="3"><span class="thumbsheadline">My Carousel</span><span class="player-wrapper"><a href="#" id="player"><img src="images/home/play.png" alt="play" /></a></span></th></tr>
      </thead>
        <tbody>
             <tr>
                 <td class="scroll"><a id="prev2" class="" href="#"><img src="http://placehold.it/20x20" alt="Previous Image" /></a></td>
                 <td><div class="caroufredsel_wrapper">
                     <div id="thumbs2">
                       <a href="#item1"><img src="http://placehold.it/100x100" /><span>Item 1</span></a>
                     </div>
                    </div></td>
                 <td class="scroll"><a id="next2" class="" href="#"><img src="http://placehold.it/20x20" alt="Next Image" /></a></td>
                    </tr>
                </tbody>
    </table>
4

2 に答える 2

0

HTMLリセットを使用してみますか？

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

これは基本的にすべての値をリセットするため、ブラウザは一緒にうまく機能し、すべての要素に対して同じポイントから開始します...

于 2012-05-17T19:13:06.197 に答える
-2

少しもわかりませんが、IE9はHTMLの一部を処理するのがあまり得意ではないと思います。私はIE9を実際には使用していないので、推測することしかできませんが、いくつかの手助けができたと思います。

于 2012-05-17T17:18:53.770 に答える