0

这是仍然突出显示 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 中也能正常工作吗？非常感谢

4

1 回答 1

1

您使用的结构对于您想要它做的事情是错误的。表格和表格单元格的主要功能是根据内容进行扩展，因此最好使用不同的布局样式，例如高度为 100% 的相对父级和其中绝对定位的子级100% 高度和overflow:auto.

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

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

这是一个工作小提琴： https ://jsfiddle.net/Ls6go1g4/

于 2016-10-12T20:11:44.050 回答