HTML - 在 Firefox 中的表格左对齐显示答案

【问题标题】：HTML - in Firefox tables are displayed aligned leftHTML - 在 Firefox 中的表格左对齐显示
【发布时间】：2014-05-01 12:13:26
【问题描述】：

我创建了一个响应式 HTML 时事通讯。所有图像都包含在一个表格中。在一个小显示器上，我希望桌子彼此叠放。在更宽的显示器上，表格应连续显示。它在 Chrome 中运行良好，但在 Firefox 中却不行。下面我粘贴了整个 HTML，我想创建一个小提琴，但在小提琴中它工作正常，非常混乱。

HTML

<html lang="en">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float image</title>
<style type="text/css">



  table {border-collapse: collapse;}
  td {font-family: arial, sans-serif; color: #333333;}

  @media only screen and (max-width: 620px) {
        body,table,td,p,a,li,blockquote {
          -webkit-text-size-adjust:none !important;
        }
        table {width: 100% !important;}

        td[class="scale_img"] img{

          height: auto !important;
          max-width: 400px !important;
          width: 100% !important;
        }
    }
  }
 </style>
</head>
<body style="margin:0; padding:10px 0;" bgcolor="#ededed" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb" width="100%">
    <tbody>

        <tr>
            <td>
                <table border="0" cellpadding="0" cellspacing="0" align="center" width="600" bgcolor="#FFFFFF">         
                    <tbody>

                        <tr>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" align="left" width="32%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0 18px 0 18px;" align="center" class="scale_img">


                                                <img src="http://projector.buyingguide.com.au/images/225_on_16_9.jpg" width="160" alt="">

                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>

                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table border="0" cellpadding="0" cellspacing="0" align="left" width="32%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0 18px 0 18px;" align="center" class="scale_img">

                                                <img src="http://projector.buyingguide.com.au/images/225_on_16_9.jpg" width="160" alt="">

                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>

                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table border="0" cellpadding="0" cellspacing="0" align="left" width="32%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0 18px 0 18px;" align="center" class="scale_img">

                                                <img src="http://projector.buyingguide.com.au/images/225_on_16_9.jpg" width="160" alt="">

                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>

                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                        </tr>


                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

根据您给定的示例，如果我将减少显示，那么将只有一个表。所以您在媒体查询中写了什么..？如果窗口调整大小，你只想要一个？
向右滚动然后你会看到另外两个表
嘿...如果我必须向左滚动，那我怎么能说它的响应性，因为不能有水平滚动条？？

标签： html css email

【解决方案1】：

试试这个：

table table table{ clear: both; }

编辑：在您的 @media 唯一屏幕和（最大宽度：620px）

【讨论】：

【解决方案2】：

我认为这是因为使用了 -webkit- 供应商前缀。你应该总是在它下面添加真正的 CSS 代码，没有供应商前缀。

例如，您有： -webkit-text-size-adjust:none !important;

仅适用于 Webkit 浏览器（Chrome、Safari）

你应该写：

-moz-text-size-adjust:none !important;
-webkit-text-size-adjust:none !important;
text-size-adjust:none !important;

-moz- 用于Mozilla firefox等

【讨论】：

另外，我注意到你的 CSS 中有太多的右括号标签。 } 那就是我所说的。