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

我需要IE6支持。我的客户仍在使用这个“非常好”的浏览器。所以，我需要用图像制作响应式表格。我们的table有12张图片。其宽度设置为100%，其td元素的宽度为8.33%。图片的宽度是100%。在所有普通浏览器中，它都很好用。在不同的屏幕上图像变大或变小。但在IE6-IE9图像中，宽度是它们的真实宽度。桌子太宽了。我看到我的网页水平滚动和它很可悲：IE6中的图像大小以父元素的百分比表示

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>

来源

2014-09-01 waldemar

对于您使用媒体查询响应式设计，使IE9和更大的http://caniuse.com/#feat=css-mediaqueries – Justinas 2014-09-01 11:57:45

@waldemar他从哪里得到他的统计，从2005年？也许你应该把他指向这个：https://www.modern.ie/en-us/ie6countdown – 2014-09-01 12:04:37

向他展示这个网站，它指出，不到0.1％的美国人使用浏览器，最高使用率在10％和全国的20％。他的信息是错误的，教育他。 https://www.modern.ie/en-us/ie6countdown – Kyle 2014-09-01 12:04:53

我不知道你用响应表的意思，但好像你想要一个表，总是出现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; 
}

最终的结果似乎是你正在试图达到的效果：

enter image description here

来源

2014-12-16 06:54:07 Sampson

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

回答

相关问题