Firefox 如何在单元格 table 内显示滚动条？

Question

这是仍然突出显示 Firefox 行为的最少代码（在 Chrome 和 IE 中，滚动条按预期显示）

<html>
<body>
<table style="width:100%; height:100%;">
   <tbody>
       <tr>
           <td           style=" width: 75%;  height: 100%; vertical-align: top; background-color: #FFE4C4;">
               <div      style=" width: 100%; height: 100%; overflow: auto;">
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
               </div>
           </td>

           <td style="background-color: #DEB887;"> <div> . </div>   </td>
       </tr>

   </tbody>
</table>
</body>
</html>

有任何提示让它即使在 FF 中也能正常工作吗？非常感谢

Answer 1

您使用的结构不符合您的要求。表格和 table-cells 的主要功能是根据内容展开，因此最好为此使用不同的布局样式，例如高度为 100% 的相对父项和绝对定位的子项里面有 100% 的高度和 overflow:auto.

也就是说，您要实现的目标如下：

a) 首先添加 html, body 到 height:100% b) 使用 table-layout:fixed 到 table c) 使用 height:100% 到 tr d) 在 td 中使用 display:inline-block div （这是为了 ie 工作） e) 使用带有 overflow:auto 的绝对定位元素。

这是一个有效的 fiddle： https://jsfiddle.net/Ls6go1g4/

Firefox 如何在单元格 table 内显示滚动条？

How can Firefox shows a scrollbar inside a cell table?

css

firefox

scrollbar

tablehtml