Question

我有一张多年来没有变过的桌子。但是，最新版本的Chrome不再能够正确呈现它。

.OrderDetailsTable {
width:1000px;
border-collapse: collapse;
padding:0;
margin:0;
}

.OrderDetailsTable .photoHolder {
width:200px;
height:200px;
position:relative;
display:inline-block;
}
.OrderDetailsTable .photoHolder .photoNumber {
background-color:#fff;
position:absolute;
top:0;
right:0;
padding:2px;
font-weight:bold;
}


<table class="OrderDetailsTable">
  <tbody>
    <tr class="alt">
      <td class="field">Use MLS Photo</td>
      <td>
        <span class='photoHolder'><span class='photoNumber'>1</span><img src='1.jpg' alt='1' width='200' height='200' /></span>&nbsp;
        <span class='photoHolder'><span class='photoNumber'>2</span><img src='2.jpg' alt='2' width='200' height='200' /></span>&nbsp;
        <span class='photoHolder'><span class='photoNumber'>3</span><img src='3.jpg' alt='3' width='200' height='200' /></span>&nbsp;
        <span class='photoHolder'><span class='photoNumber'>4</span><img src='4.jpg' alt='4' width='200' height='200' /></span>&nbsp;
        <span class='photoHolder'><span class='photoNumber'>5</span><img src='5.jpg' alt='5' width='200' height='200' /></span>&nbsp;
        <span class='photoHolder'><span class='photoNumber'>6</span><img src='6.jpg' alt='6' width='200' height='200' /></span>&nbsp;
        <span class='photoHolder'><span class='photoNumber'>7</span><img src='7.jpg' alt='7' width='200' height='200' /></span>&nbsp;
      </td>
    </tr>
  <tbody>
</table>

该表的宽度（以CSS设置）为1000像素，但没有列宽，并且图像以设置为display：inline-block的span包裹。在Firefox，Edge，IE和旧版的Chrome中，这意味着表格的列自动设置为第一列大约156px，第二列为843px。它们之间有1px的边框，总宽度为1000px。

在当前版本的Chrome中，第二列根本不会自动换行，表格会扩展到1000px以上。

Answer 1

一个小时前，我发现了相同的问题（Chrome 76.0.3809.132 64位）。它似乎与不间断空格（nbsp;）

有关

<td>
    <span class='photoHolder'><span class='photoNumber'>1</span><img src='1.jpg' alt='1' width='200' height='200' /></span>
    <span class='photoHolder'><span class='photoNumber'>2</span><img src='2.jpg' alt='2' width='200' height='200' /></span>
    <span class='photoHolder'><span class='photoNumber'>3</span><img src='3.jpg' alt='3' width='200' height='200' /></span>
    <span class='photoHolder'><span class='photoNumber'>4</span><img src='4.jpg' alt='4' width='200' height='200' /></span>
    <span class='photoHolder'><span class='photoNumber'>5</span><img src='5.jpg' alt='5' width='200' height='200' /></span>
    <span class='photoHolder'><span class='photoNumber'>6</span><img src='6.jpg' alt='6' width='200' height='200' /></span>
    <span class='photoHolder'><span class='photoNumber'>7</span><img src='7.jpg' alt='7' width='200' height='200' /></span>
  </td>

应该可以按预期工作，尽管我仍然不清楚行为改变背后的原因。

Answer 2

或者，通过添加以下显示选项来解决我们环境中的问题：

显示：-webkit-inline-box;

例如

.OrderDetailsTable .photoHolder {
width:200px;
height:200px;
position:relative;
display:inline-block;
display: -webkit-inline-box;
}

问候，阿拉维德

铬突然不在表内包装内联块

2 个答案: