chrome突然没有在表格内包裹内联块答案

【问题标题】：chrome suddenly not wrapping inline-block inside tablechrome突然没有在表格内包裹内联块
【发布时间】：2019-09-09 17:16:07
【问题描述】：

我有一张多年未换过的桌子。但是，最新版本的 Chrome 不再正确呈现它。

在这里提琴：https://jsfiddle.net/36pearxL/

.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 中设置了 1000px 的宽度，但没有列宽，并且图像被包裹在设置为 display:inline-block 的 span 中。在 Firefox、Edge、IE 和旧版本的 Chrome 中，这意味着表格的列自动设置为第一列的大约 156 像素和第二列的 843 像素。它们之间有 1px 的边框，总共 1000px 宽。

在当前版本的 Chrome 中，第二列根本不换行，表格扩展超过 1000 像素。

【问题讨论】：

标签： html css

【解决方案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>

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

【讨论】：

【解决方案2】：

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

显示：-webkit-inline-box;

例如

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

问候，阿拉文德

【讨论】：