我需要 IE6 支持。我的客户仍在使用这个“非常好”的浏览器。所以，我需要用图像制作响应式表格。
我的表格有 12 张图像。其宽度设置为 100%，其 td 元素的宽度为 8.33%。图像的宽度为100%。在所有普通浏览器中它都运行良好。图像在不同的屏幕上会更大或更小。但在 IE6-IE9 中，图像的宽度是其真实宽度。而且 table 太宽了。我在我的页面中看到水平滚动，这非常可悲:
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>
最佳答案
我不确定您所说的响应式表格是什么意思，但看起来您想要一个始终为视口(viewport)宽度 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 option here 的更多信息。本质上，它将每个单元格的宽度设置为表格总宽度的一部分。其他说明包括减少填充和边框，以及根据父级宽度制作嵌套链接和图像本身的大小:
table {
table-layout: fixed;
border-collapse: collapse;
}
table, td {
padding: 0;
}
a, img {
width: 100%;
border: none;
display: block;
}
最终结果似乎是您试图实现的效果:
关于html - IE6 中的图像大小(以父元素的百分比表示)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25605313/