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 回答