溢出-y：滚动在Firefox中不起作用答案

【问题标题】：overflow-y: scroll not working in firefox溢出-y：滚动在Firefox中不起作用
【发布时间】：2013-12-19 19:39:04
【问题描述】：

<table border="1" cellspacing="0" cellpadding="1" width="100%">
    <colgroup>
        <col span="1" style="width:5%">
            <col span="1" style="width:70%">
                <col span="1" style="width:25%">
    </colgroup>
    <tr>
        <td colspan="2">
            <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text 1</div>
        </td>
        <td rowspan="5" style="vertical-align: top;">
            <section class="loginform">
                <fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red; overflow: auto;">
                    <legend>Template</legend>
                    <ul style="padding: 10px;">
                        <li>one</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li>Four</li>
                        <li>Five</li>
                        <li>one</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li>Four</li>
                        <li>Five</li>
                        <li>one</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li>Four</li>
                        <li>Five</li>
                        <li>one</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li>Four</li>
                        <li>Five</li>
                        <li>one</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li>Four</li>
                        <li>Five</li>
                    </ul>
                </fieldset>
            </section>
        </td>
    </tr>
    <tr>
        <td>val</td>
        <td>
            <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; color:black; border:1px solid #e5e5e5; min-height: 80px;">1 Only</div>
        </td>
    </tr>
    <tr>
        <td>bal</td>
        <td>
            <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">2 only</div>
        </td>
    </tr>
    <tr>
        <td>nal</td>
        <td>
            <div style="width:100%; color:black; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Both 1 and 2</div>
        </td>
    </tr>
    <tr>
        <td>dul</td>
        <td>
            <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Neither 1 nor 2</div>
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

overflow-y: 滚动在 Firefox 中不起作用；有什么想法可以解决吗？ [您可以查看右侧的模板部分]

【问题讨论】：

我使用的是 Firefox 版本：23.0.1

标签： css firefox scroll overflow mozilla

【解决方案1】：

您应该提及section 而不是fieldset 的溢出。

<section class="loginform" style="overflow-y: auto;">

并为fieldset添加height: auto，这样内容就不会流到外面了。

<fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red; height: auto">

检查这个小提琴 http://jsfiddle.net/Ajey/ZK3yJ/

【讨论】：

【解决方案2】：

This is a bug。 Firefox 中的字段集没有实现溢出属性。您必须使用字段集吗？如果不是，我建议将其更改为 div：

变化：

<fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red; overflow: auto;">

到：

<div style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red; overflow: auto;">

【讨论】：

感谢 Andrew 的详细回复。这非常有用。
@Andrew Pope 我遇到了类似的问题，但有一个表单元素。有其他解决方法吗？当然，我不能将其更改为 div？

【解决方案3】：

在以下部分设置overflow:auto：.loginform（字段集的父元素）

UPDATED FIDDLE

.loginform
{
    height:450px;
    overflow: auto;
}

【讨论】：

感谢 Danield 的解决方案。这很有用。