Question

我需要IE6支持。我的客户仍在使用这个＆＃34;非常好＆＃34;浏览器。所以，我需要用图像制作响应表。

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

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的{{1}}。这似乎是解决方案的主要成分。您可以阅读有关fixed option here的更多信息。实质上，它将每个单元格的宽度设置为表格总宽度的一部分。其他说明包括减少填充和边框，以及根据父级宽度自己制作嵌套链接和图像大小：

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

table, td {
    padding: 0;
}

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

最终结果似乎是您试图实现的效果：

enter image description here

IE6中的图像大小，以父元素的百分比表示

1 个答案: