gpt4 book ai didi

html - IE6 中的图像大小占父元素的百分比

转载 作者:太空宇宙 更新时间:2023-11-04 16:25:33 25 4
gpt4 key购买 nike

我需要 IE6 支持。我的客户仍在使用这个“非常好”的浏览器。所以,我需要用图像制作响应表。

我的 table 有 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>

最佳答案

我不确定您所说的响应式表格是什么意思,但看起来您似乎想要一个始终 100% 视口(viewport)宽度的表格,以及 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;
}

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

enter image description here

关于html - IE6 中的图像大小占父元素的百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25605313/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com