Question

我不得不建立一个网站，主要是桌子（非常旧的网站）有点响应。我已完成所有更改，并始终使用Firefox Dev Edition和其中的Responsive Design View功能对其进行测试。

现在在 Firefox开发版（以及标准Firefox ）中看起来不错，但在 Chrome 和其他浏览器中它显示的有点不同。< / p>

它在 Firefox开发版中的外观如下：

enter image description here

这是 Chrome ：

的外观

enter image description here

正如您所看到的，我的表格略有不同。这是我表格的一部分的HTML（表格标题和第一行）：

<table class="FontNormal">
    <tbody>
        <tr>
            <td colspan="4" align="right">
                <a href="newtopic.asp">New topic</a>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr class="TableHeader" valign="top">
            <td width="500">Topic</td>
            <td width="150">
                <a href="default.asp?DS=A"><font color="black">Last Post</font></a>&nbsp;<img src="../images/sortdesc.gif">
            </td>
            <td>Product</td>
            <td>Group</td>
        </tr>
        <tr>
            <td style="max-width: 462px;">
                <a href="showtopic.asp?ID=3209">Baxter - Black Piping</a> (0)
            </td>
            <td style="max-width: 462px;">
                14/02/2015 00:29:02
            </td>
            <td style="max-width: 462px;">
                Pharma
            </td>
            <td style="max-width: 462px;">
                BDT Industry
            </td>
            <td style="max-width: 462px;">
                <a href="deletetopic.asp?ParentID=-1&amp;ID=3209">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

我没有reset.css。有没有办法可以快速解决这个问题而无需额外编程？

Answer 1

每行中有不同数量的列。确保列数一致且浏览器将是一致的。我认为您看到的是Chrome和Firefox之间的不同处理方式，即每行中的列数不匹配。

<table class="FontNormal">
<tbody>
    <tr>
        <td colspan="5" align="right">
            <a href="newtopic.asp">New topic</a>
        </td>
    </tr>
    <tr>
        <td colspan="5">&nbsp;</td>
    </tr>
    <tr class="TableHeader" valign="top">
        <td width="500">Topic</td>
        <td width="150" colspan="2">
            <a href="default.asp?DS=A"><font color="black">Last Post</font></a>&nbsp;<img src="../images/sortdesc.gif">
        </td>
        <td>Product</td>
        <td>Group</td>
    </tr>
    <tr>
        <td style="max-width: 462px;">
            <a href="showtopic.asp?ID=3209">Baxter - Black Piping</a> (0)
        </td>
        <td style="max-width: 462px;">
            14/02/2015 00:29:02
        </td>
        <td style="max-width: 462px;">
            Pharma
        </td>
        <td style="max-width: 462px;">
            BDT Industry
        </td>
        <td style="max-width: 462px;">
            <a href="deletetopic.asp?ParentID=-1&amp;ID=3209">Delete</a>
        </td>
    </tr>
</tbody>

colspan属性将使一个单元格跨越X列，因此如果按上面使用它们将始终等于5.

表差异Firefox和Chrome - 表格行

1 个答案: