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; }

这基本上会重置所有值，因此浏览器可以很好地协同工作，并从所有元素的相同点开始......

Answer 2

我不会有任何想法，但我认为IE9在处理一些HTML方面不是很擅长。我不是真的使用IE9，所以我只能推测，但我希望我帮助了一些。

IE 9 thead定位问题

2 个答案: