html - CSS：元素的大小在 Chrome 中以一种非常奇怪的方式变化

Question

我遇到了仅在 Google Chrome 中才注意到的奇怪问题：通过开发人员工具检查元素大小（图像、内表）时会发生变化。

重现步骤：

1. 打开 Chrome 开发者工具。
2. 开放元素
3. 从元素层次结构中选择包含表 table#inner 的任何元素

结果：元素在每次选择时都会增加大小（意味着元素），直到达到指定的大小

链接的问题：table#inner 必须更改自己的大小，因为 table#outer td 元素的大小，但它没有

代码示例： page.jsp

<div id="outer_div">
<table id="outer">
  <tr>
    <td>
    </td>
    <td>
      <table id="inner">
        ......
      </table>
    </td>
  </tr>
</table>
</div>

样式.css

#inner {
  width: auto; // or 100%;
}

与：300px；工作正常）

PS 在 Firefox 中一切正常

Answer 1

如果你的意思是#inner 应该占据#outer 的大小，那么，

#inner {
    min-width:100%;
}

或者

#inner {
    width:100%;
}