html - IE 9 thead 定位问题

Question

我将下表用于 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>

Answer 1

尝试使用 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; }

这实质上重置了所有值，因此浏览器可以很好地协同工作并从所有元素的同一点开始...