IE6中的图片大小（以父元素的百分比表示）

Question

我需要IE6支持。 我的客户仍在使用此“非常好”浏览器。 因此，我需要使用图像制作响应表。

我的table有12张图片。 其宽度设置为100% ，其td元素的宽度为8.33% 。 图片的宽度为100% 。 在所有普通的浏览器中，它都能正常工作。 在不同的屏幕上，图像更大或更小。 但是在IE6-IE9中，图像的宽度是其实际宽度。 而且桌子太宽了。 我在页面中看到了水平滚动条，它非常可悲：

td.footer table td {
    width: 8.333333333333333%;
    padding: 1px;
}

.footer table td img {
    width: 100%;
}

<table>
  <tr>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/1.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m1.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/2.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m2.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/3.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m3.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/4.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m4.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/5.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m5.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/6.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m6.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/7.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m7.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/8.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m8.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/9.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m9.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/10.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m10.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/11.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m11.jpg"></a></td>
    <td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/12.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m12.jpg"></a></td>
  </tr>
</table>

Answer 1

我不确定响应式表是什么意思，但看起来好像您想要的表始终是视口宽度的100％，而图像/链接是其父表单元格宽度的100％。 如果是这种情况，您实际上只需要固定的表布局即可：

<!DOCTYPE html>
<html>
    <head>
        <title>Glorious IE6</title>
        <style type="text/css">/* styles below */</style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td><a href="#"><img src="image.png" /></a></td>
                    <td><a href="#"><img src="image.png" /></a></td>
                    <td><a href="#"><img src="image.png" /></a></td>
                    <td><a href="#"><img src="image.png" /></a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

样式很基本。 首先，我们将table-layout更改为fixed 。 这似乎是溶液中的主要成分。 您可以在此处阅读有关fixed选项的更多信息。 本质上，它将每个单元格的宽度设置为表格总宽度的一部分。 其他说明包括减少填充和边框，以及使嵌套链接和图像根据其父级宽度自行调整大小：

table {
    table-layout: fixed;
    border-collapse: collapse;
}

table, td {
    padding: 0;
}

a, img {
    width: 100%;
    border: none;
    display: block;
}

最终结果似乎是您要达到的效果：