Question

我创建了一个自适应的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>

Answer 1

试试这个：

table table table{ clear: both; }

编辑：在@media only屏幕和（max-width：620px）

Answer 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等。

有关Vendor Prefixed属性的更多信息：

Click here for more information about Vendor Prefixes

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

2 个答案: