Question

我有一个包含多个列的表。在chrome上，当图像高度为小数时（例如76.54px），表格单元格（td）与内部图像的高度会有所不同。在Firefox和IE上，这样可以正常工作，并且所有tds都具有相同的高度。

请看以下小提琴： https://jsfiddle.net/sstzg0rh/3/

带图像的列的高度比其他列少几个像素。这在firefox上工作正常，所有tds都有相同的高度。为什么chrome会显示与列高不同的行为以及如何解决此问题

<div class="container-row">
<div class="container">
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Image</th>
                <th>Text</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    ABCDEFG
                </td>
                <td>
                    <img src="http://via.placeholder.com/74x90" alt="This is a no image">  
                </td>
                <td>
                    ABCDEFG
                </td>
            </tr>
            <tr>
                <td>
                    ABCDEFG
                </td>
                <td>
                    <img src="http://via.placeholder.com/74x90" alt="This is a no image">  
                </td>
                <td>
                    ABCDEFG
                </td>
            </tr>
        </tbody>
    </table>
</div>

body {
    line-height: 1.5;
}

img {
    max-width: 72px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

tr {
    min-height: 80px;
    width: 100%;
    border-bottom: 1px solid red;
}

td {
    white-space: nowrap;
    vertical-align: top;
}

Answer 1

我认为你的img元素是导致问题的内联元素。

我认为的解决方案是

img{
display:block;
}

如果图像内容的高度为小数，则表格单元格在chrome上具有不同的高度

1 个答案: