Question

此处它是仍然突出显示Firefox行为的最小代码（在Chrome和IE中滚动条按预期显示）

＆＃13;

<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>

＆＃13;

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

Answer 1

您正在使用的结构对于您希望它执行的操作是错误的。表格和表格单元格的主要功能是根据内容进行扩展，因此如果您使用不同的布局样式，例如具有100％高度的相对父级和其中包含绝对定位的子级，则它将是最佳的。 100％身高和overflow:auto。

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

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

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

Firefox如何在单元格表中显示滚动条？

1 个答案: