Question

编辑：显然它不仅仅适用于Chrome 58.我添加了屏幕截图，因为代码段并不总能重现问题。

我有一个“图像框架”表 - 3x3单元格，除了中间单元格外，每个单元格中都有一个图像，它是框架的一部分。

+----+-------+----+
| LT |   T   | RT |
+----+-------+----+
| L  |       | R  |
+----+-------+----+
| LB |   B   | RB |
+----+-------+----+

单元格中的图像通过样式参数高度和宽度设置为100％进行拉伸。但它不知何故不起作用。 T和B单元格中的图像远高于为行设置的高度。

<div style="POSITION:relative;-webkit-margin-collapse:separate separate;VISIBILITY:inherit;Z-INDEX:800108;CURSOR:default;">
  &nbsp;
  <div style="width: 424px;height: 42px; border: 1px solid black;">
    <table cellpadding="0" cellspacing="0" style="height:100%;width:100%;table-layout:fixed">
      <colgroup>
        <col width="6">
        <col>
        <col width="6">
      </colgroup>
      <tbody>
        <tr height="6">
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
        </tr>
        <tr>
          <td height="30px" style="height: 30px;">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td class="" style="height: 30px;"></td>
          <td height="30px" style="height: 30px;">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
        </tr>
        <tr height="6">
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Chrome 58的屏幕截图：

如果我将从TOP和BOTTOM单元格中的图像中删除width="100%"，那么高度将得到修复，但是，当然，图像现在没有正确地水平拉伸。

<div style="POSITION:relative;-webkit-margin-collapse:separate separate;VISIBILITY:inherit;Z-INDEX:800108;CURSOR:default;">
  &nbsp;
  <div style="width: 424px;height: 42px; border: 1px solid black;">
    <table cellpadding="0" cellspacing="0" style="height:100%;width:100%;table-layout:fixed">
      <colgroup>
        <col width="6">
        <col>
        <col width="6">
      </colgroup>
      <tbody>
        <tr height="6">
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
        </tr>
        <tr>
          <td height="30px" style="height: 30px;">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td class="" style="height: 30px;"></td>
          <td height="30px" style="height: 30px;">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
        </tr>
        <tr height="6">
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
          <td height="6px">
            <div style="overflow:hidden;width:100%;height:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width="100%" height="100%" align="middle" style="display:block" border="0"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Chrome 58的屏幕截图：

有人可以解释一下为什么打破尺寸以及如何正确拉伸图像？

HTML表格 - 单元格中的图像高度错误

0 个答案: