为什么 display: table 在 Firefox 和 Chrome 中的行为不同?

2024-02-26

我正在制作一个看起来像这样的布局

All contained withing a 'table' (display: table)
 __________________
| S| HEADER        |
| I|---------------|
| D|               |
| E| CONTENT       |
|  |_______________|
|  |FOOTER         |
--------------------

SIDE is a table-cell and HEADER, CONTENT, FOOTER包含在另一个中table-cell. CONTENT is a div具有overflow-y设置为自动,并且在 Chrome 中,每当内容CONTENT超过初始高度,会出现滚动条,并且整个表格不会垂直调整大小,但是,在 Firefox 中,整个表格会垂直扩展,这不是我期望的行为。

我的桌子有table-layout: fixed财产和overflow: hidden. 无论如何,我可以阻止表格在 Firefox 中垂直扩展吗?


提到一些高度

<td>
<div style="height:200px;
overflow:hidden;">
contents goes here
</div>
</td> 

调整高度,它应该会切断你视线之外的多余线条

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

为什么 display: table 在 Firefox 和 Chrome 中的行为不同? 的相关文章

  • Flexbox 中的图像高度在 IE 中不起作用

    我有一个 Flex 行 其中包含 5 个 Flex 单元格 其中包含一个应该在中间对齐的图像 它在 Chrome 和 Firefox 中完美运行 但在 IE 中却不行 它没有得到好的比例 换句话说 height auto当图像位于 Flex
  • 用于移动 Web 应用程序的带有图表的框架

    我正在开发一个移动网络应用程序 我需要在饼图中表示一些数据 但是我没有找到任何好的框架来提供良好的选择并在移动设备上正常工作 我想知道一些框架 免费 这可以帮助我 如果您能给出一些基础示例 我会感到惊讶 我正在考虑使用 ajax 技术来显示
  • 禁用 Firefox 的自动填充

    是否可以禁用 Firefox自动填充功能而不禁用自动完成 我知道我可以这样做 autocomplete off 但我不想禁用自动完成 只是禁用自动填充 Firefox 正在填充一些本应为空的隐藏字段 这主要是用户刷新页面时出现的问题 表单字
  • 拒绝在框架中显示“https://www.youtube.com/watch?v=oKZRsBjQJOs”,因为它将“X-Frame-Options”设置为“sameorigin”

    我需要将来自 youtube 的视频放置在我的网站中 但 URL 是一个变量 我创建了一个可以放置的管道 但不起作用 这是我在 HTML 文件中的代码 我的管道的代码是这样的 export class VideoPipe implement
  • Javascript 可折叠面板默认打开

    我正在关注这个代码示例在这里找到 https www w3schools com howto howto js collapsible asp使用 css html javascript 创建可折叠面板 function toggleCol
  • border-box 不适用于内联块元素?

    我有一个清单inline block元素 我想为您将鼠标悬停在其上的元素添加边框 但是 请注意边框如何偏移元素 即使我使用box sizing border box并明确定义元素的宽度和高度 我说明了以下行为 box sizing bord
  • 无法在 Firefox 中显示我的 svg 图像?

    我无法在 Firefox 中显示我的 svn image 它在 Safari 和 Chrome 中工作正常 没有 IE 所以还没有测试过 它在我的html中是这样实现的 img 类 logo1 src images logo6 svg 其中
  • 上传时自动缩小 CSS 和 Javascript

    有谁知道通过上传处理 脚本自动运行某些文件类型的好方法 当我将 CSS 和 Javascript 上传到服务器时 我试图自动缩小它们 在本地保留一个漂亮的 人类可读的版本 同时在服务器上保留一个缩小的版本 我目前在 Windows 上使用
  • 将弹性项目放置在网格中彼此的顶部而不包裹它们[重复]

    这个问题在这里已经有答案了 我使用 Flexbox 有以下布局 我想让 div 包含2在右侧 以及Team and Scorers应该弥补它左边的空间 Required layout 这和下面的想法是一样的2如果使用表格 div 的行跨度为
  • 仅 CSS 下拉菜单不像 iPad 等。跟随菜单链接而不显示菜单

    我们在这里创建了一个新网站 www worthingleisure co uk splashpoint 它的顶部有一个纯 CSS 菜单 通过使用 li hover ul 方法并适当显示和隐藏 该菜单应该适用于 iPad iPhone 和其他
  • 使用 PHP 简单 HTML DOM 将隐藏的输入标记值作为字符串获取

    我试图获取输入类型隐藏标记值 CAS AH 11 等 以及名称属性 但在运行基于 PHP 的解析器时我得到的只是一个空白页 有人知道出了什么问题吗 我已经查过了将隐藏输入作为字符串抓取 使用 PHP 简单 HTML DOM 解析器 http
  • 如何隐藏 URL 中的 ID

    我以前在 Stack Overflow 上见过这类问题 但没有一个真正有帮助 我也用谷歌搜索过 但没有骰子 我想知道如果用户单击选项卡本身是否可以隐藏 URL 中的 ID 这是网页 www planet nu dev new experia
  • 修复 PHP 中格式错误的 HTML?

    我正在根据用户提供的片段构建一个大型 HTML 文档 这些用户有以各种方式格式错误的烦人习惯 浏览器足够强大且宽容 但我希望能够验证并 理想情况下 修复任何格式错误的 HTML 如果可能的话 例如 td b Title b td 可以合理地
  • 如何将 TextArea 放入表 td 中?

    我想放置一个textarea内表td 不幸的是 它仍然是单行的 td align right valign top td td td
  • min-height 和 height 属性有什么区别? [复制]

    这个问题在这里已经有答案了 我查了一下这个问题 但无法理解它与我的具体问题的关系 我将有问题的 html 设置如下 div class container fluid div class inner div class weatherdat
  • 单击 div 中的图像时如何翻转该 Div?

    好吧 我对编写 Javascript 知之甚少 我可以对其进行一些编辑 并且涉足了 CSS3 动画 我将向您展示我正在努力实现的目标 然后在下面进行解释 网站布局将是这样的 https i stack imgur com RMb4R jpg
  • 选择 jQuery 中的每第 n 个项目?

    jQuery 有方便的 even 和 odd 选择器 用于选择集合中偶数或奇数索引的项目 我用它来清除一系列浮动框中的所有其他项目 如下所示 div class 2up div div div div div div div and Cle
  • HTML 中按钮内的图标

    我需要在 HTML 中将小图标放在按钮内 例如 我需要在我的网站上有 facebook 按钮 在按钮内首先是 F 图标 然后是 facebook 怎么做
  • CSS 转换的中断对于相同的属性值不起作用

    I ve 回答了一个问题 https stackoverflow com a 43372990 3162554关于如何在悬停子元素时启动动画 然后保留应用的样式 直到取消悬停父元素 然而 我在我提出的解决方案中发现了一个我无法解释但我想理解
  • IE8 和怪异模式

    IE8 是否像 IE6 7 一样以怪异模式运行 我有一个网页 其中有一些非常奇怪的代码 内容以填充和负边距居中 它在 IE6 7 和其他浏览器中可以正常工作 但在 IE8 中 内容区域的宽度只有一半并且不居中 怪异模式的标志 源代码在 DO

随机推荐