溢出-y:滚动在 Firefox 中不起作用

2024-04-16

请参考网址:http://jsfiddle.net/8tFnG/1/ http://jsfiddle.net/8tFnG/1/

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

溢出-y:滚动在 Firefox 中不起作用;有什么办法解决同样的问题吗? [您可以查看右侧的模板部分]


你应该提到溢出section不是fieldset.

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

And add height: auto对于fieldset,这样内容就不会流到外面。

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

溢出-y:滚动在 Firefox 中不起作用 的相关文章

  • 如何让图片在div中居中?

    我的 HTML 代码如下所示 div class ctn img src some img jpg div The ctn应该是固定大小 例如 150 150 但 IMG 的尺寸可能更大或更小 200 50 50 200 50 50 等 如
  • 如何在 CSS 选择器中使用 JSF 生成的带有冒号“:”的 HTML 元素 ID?

    我一直在使用 JSF 处理一个简单的 Java EE 项目
  • 为什么百分比边距会导致换行?

    div style background color dd3fb8 a style margin left 10 a a a b a a c a div 在上面的示例中 字母 c 将在新行上 但如果我将 margin left 设置为px单
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi
  • 定义 CSS @Font-Face 粗体斜体

    我正在开展一个项目 其中我正在使用的字体有六种粗细 样式 这些包括 常规 斜体 半粗体 半粗斜体 粗体和粗体斜体 我有 font face 标签设置 理论上 它们应该显示的方式 然而 现实中发生的情况是粗体始终是斜体 是否有办法声明这些粗体
  • dojo中tabContainers的高度

    我正在使用 Dojo tabContainer 快速问题 你吗 have to如果您正在处理 Dojo 容器 请在 CSS 中指定小部件大小 以像素为单位 据我所知 让 TabContainer 实际显示的唯一方法是通过 CSS 为其指定绝
  • 如何在 Firefox 和 Chrome 中选择文档模式而不设置 DOCTYPE?

    我正在努力将使用旧网络标准创建的网页转换为支持现代网络浏览器 目前 该网页在 Internet Explorer 9 Firefox 和 Chrome 中以 Quirks 模式呈现 在 IE9 中 我可以选择 文档模式 在其中呈现我正在查看
  • UITableView:以编程方式滚动内容视图

    您好 我正在尝试转发从 UITableView 前面的 UIView 收到的触摸 但这样做我不能再让桌子滚动了 see here https stackoverflow com questions 3417808 uitableview c
  • 如何在悬停时向表 tr 元素添加框阴影? [复制]

    这个问题在这里已经有答案了 所以我试图在我的桌子上添加一个盒子阴影tr悬停时的元素 目前 它在 Firefox 中运行良好 但在其他浏览器中则不然 CSS table tbody tr hover background color 1332
  • CSS、HTML 中的图像填充

    我在处理表格中的图像时遇到问题 虽然我设置了 tr width 95 并且图像的宽度也为 95 但 tr 将自动具有 97 的宽度 右侧填充 2 px 但是 我已经明确声明了 style padding 0px 示例页面如下 http be
  • Vuetify 默认轮播 CSS 选择器,用于减少过渡持续时间

    I need a transition that does not produce the dreaded image blinking for a v carousel item Ideally it s a smooth and qui
  • “该网站似乎使用了滚动链接定位效果。这可能不适用于异步平移”

    我从 Firefox 收到了这个不寻常的警告 它所指的定位效果是div我将旋转作为滚动高度的一个因素 我从来没有遇到过任何问题 但是这是我应该担心的事情吗 如果没有这个警告 是否有这样的效果 演示此问题的 JavaScript 是 gear
  • CSS 六角形图案

    我找到了一个关于如何使用 CSS 创建六边形图案的很棒的 stackoverflow 答案 使用 CSS3 生成重复的六边形图案 https stackoverflow com questions 10062887 generate rep
  • 对于固定的 960px 布局,我应该在 twitter bootstrap 中设置哪些值?

    我正在使用 twitter bootstrap 并且从 github 克隆了 less 我想设置网格宽度变量 因为我需要 960px 固定布局 940px 宽度的默认值为 gridColumns 12 gridColumnWidth 60p
  • window.print() 仅打印屏幕的“可视”部分

    我有一个可滚动屏幕 上面有一个打印按钮 并且在其 onclick 事件上调用 window print 函数 我的问题是它只打印屏幕的 可见 部分 而不是整个屏幕 如果页面可滚动 则当内容无法容纳在 1 页中时 打印应扩展到 2 或更多 页
  • “块样式”单选按钮适用于除 iPad 之外的所有设备

    我有一组单选按钮 并对它们进行了样式设置 以便它们显示 块 以便它们看起来像按钮 还隐藏了单选按钮本身 这在台式机和 Android 平板电脑上的 Chrome 和 Firefox 中效果很好 但在 iPad 上不起作用 在这里查看 htt
  • CSS相对div的宽度自动按绝对div扩展

    是否可以让父级 位置 相对 自动通过其绝对子级扩展其宽度 这是我的 jsfiddle 链接 http jsfiddle net YD2Xu http jsfiddle net YD2Xu 理想的是 container 和 full widt
  • 将两个 .less 文件合并为一个

    假设我少了两个文件 first less a b font size 13px color lime and second less import first less a font family sans serif 我想要一种将它们组合
  • 如何删除html中单击的元素周围的虚线

    我发现如果有一个a页面中的链接不链接到新页面 那么当用户单击它时 该元素周围会有一条虚线 只有当用户单击页面中的其他任何内容时它才会消失 如何删除它 Example 注意元素周围的虚线Section 2 Use outline none锚定
  • 如何防止图像被裁剪

    我正在尝试创建一个包含很多图层的动画图片 为了在不同的屏幕上获得正确比例的图像 我使用covercss 属性值 我已经尝试过object fit对于图像和background size用于背景图像 这就是为什么我的宽屏幕图像被浏览器裁剪的原

随机推荐