为什么 Flex 中的 fieldset 在浏览器之间的行为不同

2023-12-14

我写了这个示例代码:

<div style="display:flex;flex-direction:row;width:100%">
    <fieldset style="white-space: nowrap; width:100%; overflow:auto">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis est id posuere pellentesque. Donec sem lacus, consequat id consectetur a, semper in felis. Suspendisse potenti. Nam eu dapibus ex, nec convallis diam. Donec mollis sit amet nunc quis malesuada. Vestibulum semper cursus magna at commodo. Etiam tincidunt enim vel urna tempor dapibus. Praesent posuere nunc lorem, non dignissim ex semper sed. In hac habitasse platea dictumst.</p>
        <p>Fusce molestie sapien a erat laoreet maximus. Phasellus id commodo dolor, pellentesque aliquet lacus. Nunc viverra nec mi nec volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius tellus ante, non tincidunt arcu venenatis ac. Praesent non diam varius, tempus magna sed, bibendum dui. Curabitur lobortis leo tellus, a imperdiet est sodales a.</p>
        <p>Suspendisse elit leo, feugiat in tortor eu, maximus mollis urna. Fusce gravida auctor sapien, ac lacinia diam. In quis nisl diam. Cras blandit elementum ornare. Nunc quam tortor, semper vitae lacinia quis, pulvinar at arcu. Praesent suscipit, urna vitae viverra tempor, eros nisl mollis enim, at lobortis sapien mi et purus. Donec at pretium purus. Praesent auctor turpis vitae massa semper elementum. Fusce tempus turpis sit amet aliquam rhoncus. Donec ligula mauris, accumsan eget consequat viverra, ultrices ac ipsum. Ut maximus convallis magna, id mattis tortor ornare non.</p>
        <p>Suspendisse lacinia mi vel malesuada pretium. Vivamus sagittis vulputate tempus. Mauris feugiat enim et nisl volutpat sollicitudin. Sed eu leo lectus. Donec tempus consequat risus, pharetra tempus urna pharetra non. Aenean vulputate efficitur nisi, non egestas dui faucibus quis. Praesent semper eget neque sed vulputate. Nullam molestie tellus eu malesuada dignissim. Nullam tempus sed elit nec ullamcorper.</p>
        <p>Pellentesque urna lorem, cursus quis tortor sit amet, elementum efficitur elit. Morbi blandit faucibus elit vitae finibus. Morbi neque mi, tincidunt non felis eget, mattis ullamcorper mi. Suspendisse potenti. Maecenas nec metus eu erat scelerisque interdum. Vivamus sit amet interdum dolor, sit amet pellentesque mauris. Morbi vehicula purus ac aliquet dictum. Curabitur lacinia purus id leo commodo pellentesque.</p>
    </fieldset>
</div>

字段集宽度在 Chrome 上溢出屏幕,但在 IE 和 Firefox 上工作正常。

在不同的浏览器上检查一下:http://jsfiddle.net/hideyatsu/wpe03rs6/


在 Chrome 上<fieldset>被赋予min-width等于内容的宽度。您可以通过输入来删除它min-width: 0px; in the <fieldset> style.

http://jsfiddle.net/wpe03rs6/2/

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

为什么 Flex 中的 fieldset 在浏览器之间的行为不同 的相关文章

  • Chrome 浏览器不显示 HTTP 处理程序生成的图像

    基本上我有一个网站 可以呈现一些文档 主要是办公室 的 HTML 预览 生成的 HTML 片段包含在同一网站返回的页面中 但图像由 HTTP 处理程序从具有以下链接的另一个网站返回 img width 50 height 50 src ht
  • 如何将表格中的td高度设置为0px?

    我有一个包含几行的 HTML 表 这是动态构建的 全部 tr 有一个 td inside If one td 里面没有 HTML 内容 我希望它是不可见的 如何才能做到这一点 并不是说里面的 HTML 是动态渲染的 我不想使用display
  • 使用 pkg:sjPlot 函数创建一个生成部分斜体单元格的数据框

    我正在尝试创建一个简单的数据表 其中 Coral taxon 列中的属名称为斜体 而 spp 列中的属名称为斜体 属名后面的部分不大写 我尝试使用 expression 函数对 Coral taxon 的每一行进行编码 但没有成功 sum
  • 有没有办法禁用网站上表单的自动填写? [复制]

    这个问题在这里已经有答案了 我最近才学会使用创建网站HTML and PHP 我创建了一个网站 其中有一个测验 要求人们随机翻译单词 用户将他们的答案输入到表格中 网站评估答案是否正确 现在 当一个问题在一个会话中被问两次时 就会出现自动填
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • HTML 属性不带引号?

    我一直认为html的属性中需要引号 div class service definition or div class service definition 但最近我注意到 w3 验证器不会将以下内容识别为错误 div class serv
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • 创建一个简单的 10 秒倒计时

    我想要一行这样写的 Your download will begin in 10 9 8 etc Beginning on page load seconds 我已经设置了 10 秒下载文本 并且我还查看了其他 stackoverflow
  • 如何删除flexbox中所有换行行的左右边距(没有nth-child或js)

    我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距 而不使用 nth child 或 JavaScript 如果这是不可能的 那么我想下一个最好的方法是在主弹性盒元素上设置负左 右边距 但我不太确定使用弹性盒来做到这一点的最
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • 更快地开发和测试打印样式表的方法(避免每次都进行打印预览)?

    这是我现在的流程 保存对 print css 的更改 打开浏览器并刷新页面 右键单击并选择 打印 gt 打印预览 Firefox 但实际上是任何浏览器 第三步让我烦恼 我想知道是否可以通过插件或其他东西将其从流程中删除 只需选择以打印媒体形
  • 如何仅在 css/html 中强制在单词之间换行?

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w
  • Perl:HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本
  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • Django - 提交具有同一字段多个输入的表单

    预警 我对 Django 以及一般的 Web 开发 非常陌生 我使用 Django 托管一个基于 Web 的 UI 该 UI 将从简短的调查中获取用户输入 通过我用 Python 开发的一些分析来提供输入 然后在 UI 中呈现这些分析的可视
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • HTML 输入 - 名称与 ID [重复]

    这个问题在这里已经有答案了 使用 HTML 时
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题

随机推荐