html - 如何修复 IE/FF 显示图像问题

Question

Chrome 输出:

IE10 输出:

这是 HTML 代码:

<table>
    <tr class="section group vertAlignT">
        <td class="col span_img_text_image span_pad_right vertAlignT">
            <div class="hidOverflow">
                <div class="captionBottom">
                    <a href="/article.aspx" title=""><img id="NewsArticle_3080_image" class="imgArtThumb" title="" alt="" src="lungs.jpg" /></a>
                    <figcaption>View Full Article!</figcaption>
                </div>
            </div>
        </td>
        <td class="col span_img_text_text span_pad_left vertAlignT">
            <table>
                <tr>
                    <td><a href="/article.aspx" title="" class="defaultLinks setBold">Taking Steps to Prevent Lung Cancer</a></td>
                </tr>
                <tr>
                    <td>
                        <div class="serviceHolder hidOverflow"><span>blah blah blah text...</span></div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS:

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: hidden;
    width: 100%;
}

/*  COLUMN SETUP  */
.col {
    /*display: block;*/
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
.span_img_text_image {
    width: 32.2%;
}
.span_img_text_text {
    width: 65.1%;
}
.span_pad_right {
    padding-right: 1%;
}
.hidOverflow {
    overflow: hidden;
}
.vertAlignT {
    vertical-align: top;
}
.captionBottom {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0 0 0 0;
    text-align: center;
}
figcaption {
    width: 100%;
    position: absolute;
    background: #e55302;
    background: rgba(229,83,2,0.90);
    color: #FFF;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.captionBottom:hover figcaption {
  opacity: 1;
}

.captionBottom:before {
    bottom: 10px;
    left: 10px;
}
.captionBottom figcaption {
    left: 0;
    bottom: -30%;
}
.captionBottom:hover figcaption {
    bottom: 0;
}
.imgArtThumb {
    max-width: 100%;
    height: auto;
}
.serviceHolder {
    width: 100%;
    overflow: hidden;
}

如何让IE显示一样？它在 IE10 中显示，图像正在扩展但溢出到 DIV 之外。

Answer 1

我已经更新了你的 fiddle .

更新的 CSS:

*{
    padding: 0;
    margin: 0;
    outline: 0;
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: hidden;
    width: 100%;
}

/*  COLUMN SETUP  */
.col {
    /*display: block;*/
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
.span_img_text_image {
    width: 32.2%;
}
.span_img_text_text {
    width: 65.1%;
}
.span_pad_right {
    padding-right: 1%;
}
.hidOverflow {
    overflow: hidden;
}
.vertAlignT {
    vertical-align: top;
}
.captionBottom {
    position: relative;
    overflow: hidden;
    margin: 0 0 0 0;
    text-align: center;
}
figcaption {
    width: 100%;
    position: absolute;
    background: #e55302;
    background: rgba(229,83,2,0.90);
    color: #FFF;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.captionBottom:hover figcaption {
  opacity: 1;
}

.captionBottom:before {
    bottom: 10px;
    left: 10px;
}
.captionBottom figcaption {
    left: 0;
    bottom: -30%;
}
.captionBottom:hover figcaption {
    bottom: 0;
}
.imgArtThumb {
    max-width: 100%;
    height: auto;
}
.serviceHolder {
    width: 100%;
    overflow: hidden;
}
.span_half {
    width: 48.5%;
    padding-right: 1%;
}

我刚刚去掉了 captionBottom 类中的 display: inline block。