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中的圖像大小以父元素的百分比表示

回答

相關問題