@media code dosn't似乎在Chrome中工作

我有以下代碼，我希望單元格在屏幕寬度小於特定數字時摺疊。@media code dosn't似乎在Chrome中工作

通常情況下，我習慣於IE出現問題，但在這種情況下，IE和Firefox都能正常工作，它不會對我正在做的事情做出反應。

任何想法？

我的代碼是：

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
 
<style> 
 
    @media screen and (max-width: 432px) { 
 
    .dynTd {display: block;} 
 
    } 
 
</style> 
 

 
</head> 
 

 
    <table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;"> 
 
    <tr> 
 
\t <td style="vertical-align: top"> 
 
\t \t <img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85"> 
 
     </td> 
 
     <td style="vertical-align: top; display: block;"> 
 
\t  <span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br> 
 
\t \t <div style="font-size: 5px;">&nbsp;</div> 
 
\t \t <span>Title</span> 
 
\t \t <div style="font-size: 10px;">&nbsp;</div> 
 
\t \t \t <span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br> 
 
\t \t \t <span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br> 
 
\t \t \t <span style="color:#eb6909;font-size:10px;">MAIL</span> <span>[email protected]</span><br> 
 
\t \t <div style="font-size: 12px;">&nbsp;</div> 
 
     </td> 
 
     <td class="dynTd" style="width: 12px;"></td> 
 
     <td class="dynTd" style="vertical-align: top;"> 
 
\t  <img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18"> 
 
\t \t <div style="font-size: 8px;">&nbsp;</div> 
 
\t \t Company Name<br> 
 
\t \t Company Address<br> 
 
\t \t Zip code and City<br> 
 
\t \t <div style="font-size: 5px;">&nbsp;</div> 
 
\t \t <a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a> 
 
\t </td> 
 
\t </tr> 
 
    </table> 
 

 
</html>

來源

2017-05-30 G. Weisz

轉到一個TD成塊，同時使TR爲是會導致瀏覽器來補償 - 根據Tables說明書中，

如果'table-row'框的子C不是'table-cell'，那麼圍繞C和所有連續的s生成一個匿名的'table-cell'框C的iblings不是「表格單元格」框。

而且display:block的td元素不再是'表格單元的了！
因此，瀏覽器創建這樣一個匿名錶格單元格。顯然，Chrome的使用方式與FF和IE不同。

解決方案是確保不會發生;例如將表格中的所有元素變爲blocks，以便不需要匿名錶格單元。

@media screen and (max-width: 432px) { 
 
    table, tr, td {display: block;} 
 
}

<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;"> 
 
    <tr> 
 
    <td style="vertical-align: top"> 
 
     <img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85"> 
 
    </td> 
 
    <td style="vertical-align: top; display: block;"> 
 
     <span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br> 
 
     <div style="font-size: 5px;">&nbsp;</div> 
 
     <span>Title</span> 
 
     <div style="font-size: 10px;">&nbsp;</div> 
 
     <span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br> 
 
     <span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br> 
 
     <span style="color:#eb6909;font-size:10px;">MAIL</span> <span>[email protected]</span><br> 
 
     <div style="font-size: 12px;">&nbsp;</div> 
 
    </td> 
 
    <td class="dynTd" style="width: 12px;"></td> 
 
    <td class="dynTd" style="vertical-align: top;"> 
 
     <img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18"> 
 
     <div style="font-size: 8px;">&nbsp;</div> 
 
     Company Name<br> Company Address<br> Zip code and City<br> 
 
     <div style="font-size: 5px;">&nbsp;</div> 
 
     <a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a> 
 
    </td> 
 
    </tr> 
 
</table>

這看起來是一樣的所有瀏覽器。你可以通過一種方式使它看起來像你想要的那樣...

來源

2017-05-30 16:45:14

提醒我[this]（https://stackoverflow.com/questions/24152542/why-does-changing-the-positioning -of-A-錶行元件從靜態到ABSOL/25078487＃25078487）。 – BoltClock

謝謝，它幫助！ –

@media code dosn't似乎在Chrome中工作

回答

相關問題