0

一段时间以来，我们一直在使用相同的方法在移动设备上堆叠列。不要认为这有什么不寻常的地方，我们的 Litmus 测试总是全面恢复正常。最近，一位使用 Android 设备（运行 4.2 的 S4 mini）的客户抱怨说布局被破坏了。媒体查询触发得很好，电子邮件的非堆叠部分的行为符合预期，但我们试图堆叠的 3 列顽固地拒绝这样做。还有其他人有类似的问题吗？

我做了一个大大简化的演示代码来说明这个问题。

CSS：

@media only screen and (max-width: 660px) {

*[class].fl{float:left !important;}
*[class].wr{display:block !important;}
*[class].width320{width:320px !important;}
*[class].width300{width:300px !important;}
*[class].height20{height:20px !important;}

的HTML：

<table width="600" class="width300" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td width="187" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
        <td width="20" class="wr fl width300 height20" style="font-size:1px; line-height:1px">&nbsp;</td>
        <td width="186" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
        <td width="20" class="wr fl width300 height20" style="font-size:1px; line-height:1px">&nbsp;</td>
        <td width="187" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
    </tr>
</table>
4

0 回答 0