Question

我的css在firefox上运行正常，但是Chrome有一些问题，正如你所看到的，tr是不完整的。

你知道如何调试这个吗？

火狐：

铬

这是相应的html

<tbody>
<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
        <td colspan="2"></td>
        <td colspan="7"></td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td colspan="3">↓</td>
    <td>- Km</td>
    <td>- min</td>
    <td></td>
</tr>

<tr class="content_6 1861454 firstEnquete firstContent" style="display: table-row;">
    <td class="pdvTaille2">
        ITM0013 - INTERMARCHE ESPERE-SUPER-DRIVE <br>
        RD 911 "LES GRANGES" - 46090 - ESPERE
    </td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
      <td colspan="3">↓</td>
      <td>- Km</td>
      <td>- min</td>
      <td></td>
</tr>                                      

<tr>
    <td colspan="9" class="listeEnquetes"></td>
</tr>

<tr class="content_6 1848673 firstEnquete firstContent" style="display: table-row;">
    <td class="pdvTaille2">
        ITM0004 - INTERMARCHE VIEUX-VY-SUR-COUESNON-SUPER-DRIVE <br>
        Z.A. LA CROIX COUVERTE - 35490 - VIEUX-VY-SUR-COUESNON
    </td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td colspan="3">↓</td>
    <td>- Km</td>
    <td>- min</td>
    <td></td>
</tr>                                       

<tr>
    <td colspan="9" class="listeEnquetes"></td>
</tr>

<tr class="content_6 1848727 firstEnquete firstContent" style="display: table-row;">
    <td class="pdvTaille2">
        ITM0005 - INTERMARCHE BROONS-SUPER-DRIVE <br>
        PA DU CHALET - 22250 - BROONS
    </td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td colspan="3">↓</td>
    <td>- Km</td>
    <td>- min</td>
    <td></td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td colspan="2"></td>
    <td colspan="7"></td>
</tr>
</tbody>

感谢您的帮助，如果您需要，我可以添加一些Css，但可能没有用来展示一切。希望你可能有一个想法，其他导航器存在一些其他问题，但之前存在，所以我只想关注那个。

PS：这是控制台中生成的代码，但它是用twig构建的。

Answer 1

你刚才没有提到该行中空单元格的任何内容
在第一行中，你使用colspan="2"和colspan="7"表示完整的行，在第三行中你有刚刚使用<td></td>左侧第一行中有9列，第三行只有一列。

我根据自己的方便做了一些改变，但我不知道同样会对你有用，但主要的概念是第一行中使用的<td> su的数量，包括colspan u必须根据您的要求在后续行中保持相同数量的cols。
如果这个答案不清楚，或者你在任何时候都不明白，请问我能解释一下。

<table><tbody>
<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
        <td colspan="4"></td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td>↓</td>
    <td>- Km</td>
    <td>- min</td>
    <td></td>
</tr>

<tr class="content_6 1861454 firstEnquete firstContent" style="display: table-row;">
    <td class="pdvTaille2" colspan="4">
        ITM0013 - INTERMARCHE ESPERE-SUPER-DRIVE <br>
        RD 911 "LES GRANGES" - 46090 - ESPERE
    </td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
      <td>↓</td>
      <td>- Km</td>
      <td>- min</td>
      <td></td>
</tr>                                      

<tr>
    <td colspan="4" class="listeEnquetes"></td>
</tr>

<tr class="content_6 1848673 firstEnquete firstContent" style="display: table-row;">
    <td class="pdvTaille2" colspan="4">
        ITM0004 - INTERMARCHE VIEUX-VY-SUR-COUESNON-SUPER-DRIVE <br>
        Z.A. LA CROIX COUVERTE - 35490 - VIEUX-VY-SUR-COUESNON
    </td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td>↓</td>
    <td>- Km</td>
    <td>- min</td>
    <td></td>
</tr>                                       

<tr>
    <td colspan="4" class="listeEnquetes"></td>
</tr>

<tr class="content_6 1848727 firstEnquete firstContent" style="display: table-row;">
    <td class="pdvTaille2" colspan="4">
        ITM0005 - INTERMARCHE BROONS-SUPER-DRIVE <br>
        PA DU CHALET - 22250 - BROONS
    </td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td>↓</td>
    <td>- Km</td>
    <td>- min</td>
    <td></td>
</tr>

<tr class="content_6 firstEnquete firstContent" style="display: table-row;">
    <td colspan="4"></td>
</tr>
</tbody>
</table>

firefox和chrome之间的Css差异

1 个答案: