程序员经验分享-hwhale

为什么这个 Flexbox 布局在 Safari 中会被破坏？

2024-03-21

所以我在 CSS 中设计了这个，想法是有一个标题，其余部分作为可滚动内容。
（有一个链接到现场演示在底部）

Alas, in Safari it is broken and looks like this: Layout in Safari

可以看到，表头的高度计算错误，导致绿框溢出。

我将问题缩小到错误的计算flex-basis标题的。或者说我是这么认为的。

现场演示在这里：http://jsbin.com/zusavefoqu http://jsbin.com/zusavefoqu

知道如何修复它吗？

Thanks!


您可能需要添加供应商前缀。

目前，flexbox已被所有主流浏览器支持，IE 8 和 9 除外 http://caniuse.com/#search=flex.

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀 https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix.

要快速添加所需的所有前缀，请将 CSS 发布到此处的左侧面板中：自动前缀器 https://autoprefixer.github.io/.

另外，Safari 中的布局似乎存在两个问题：

  • 标头溢出，以及
  • 垂直滚动条打开#more不见了。

有关常见 Flex 错误及其解决方法的列表，请参阅此页面：Flexbugs https://github.com/philipwalton/flexbugs.

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

css

safari

flexbox

为什么这个 Flexbox 布局在 Safari 中会被破坏？ 的相关文章

  • 根据窗口大小调整 div 及其内部内容的大小

    我已经查找了一百万种技术 但我无法让它发挥作用 我知道还有其他类似的帖子 如果它给任何人带来麻烦 我很抱歉 但我需要针对我的代码的具体说明 因为我很愚蠢 提前非常感谢 我希望 div 容器 contentContactBox 以及其中的所有

  • 使用 jQuery / JavaScript 将 Alpha 通道添加到背景颜色

    我有一个 jQuery 函数 它添加了一个Alpha通道到一个背景颜色当事件发生时 这是我的jsFiddle http jsfiddle net liormb SxQt8 1 CSS div background color rgb 100

  • 如何将 OTF/TTF 文件转换为 EOT 格式？

    我需要使用 font face 功能 并且我的字体是 OTF TTF 格式 而 Microsoft 浏览器仅支持 EOT 格式 我尝试使用微软工具WEFT 但它不起作用或者我不明白它是如何工作的 还有其他方法可以将我的字体转换为 EOT 格

  • 如何使

    我有一个列表 用作选项卡列表 div ul class TabControl li a href search Funds Funds 60 a li li a href search Companies Companies 4 a li

  • 如何编辑 QProgressBar 的样式表

    我无法在我的应用程序中编辑进度条的颜色 仅编辑文本颜色 pyhton 3 9 PySide6 QT Creator 7 0 2 Python应用程序 https i stack imgur com 6hKFI png import sys

  • 放大 div 内的图像而不移动 div

    如何使图像在此 div 比例内 而不在悬停时进行实际的 div 缩放 所以我只想放大图像 这是代码 div img src some image div Use transform scale container display inlin

  • HTML 嵌入对象具有灰色背景。可以透明吗？

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div

  • 如何防止 Safari 滚动溢出：隐藏的 iframe？

    使用 Safari 您可以通过设置 style overflow hide 来禁用大多数 iframe 滚动 在 iframe 上 但是 如果您单击 iframe 并移动鼠标 内容无论如何都会滚动 Example 滚动内容 html

  • 输入数字最大属性调整字段大小

    当在 Chrome 中向输入数字字段添加最大值时 它将根据最大值的宽度重新调整字段的大小 看来我无法控制调整大小的行为

  • 当缩放元素在缩放之前大于容器时，CSS 变换比例（向下）不会使用 margin 0 auto 将元素居中

    看来 当缩小以前不适合其容器的元素时 margin 0 auto将不再使元素在其父元素中居中 请注意 使用transform origin center center并没有解决这个问题 这是因为自动边距似乎在缩放之前而不是之后应用 我期望后

  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动

  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但

  • 带有右侧固定侧边栏的 Bootstrap 响应式网格

    我想创建一个带有类似引导程序的模板 它尊重网格的响应系统 在图中 导航栏和右侧 包含两个按钮 是粘性的 始终显示在视图上 我的问题是右侧 因为在引导网格系统中 右侧块将被视为单行 而主要内容包含多行 我怎样才能做到这一点 围绕整个 Boot

  • 从 Bootstrap 4 网格中删除装订线

    在 Bootstrap 4 中 我被要求自定义桌面的默认网格系统 如下所示 其中 容器 桌面断点为1280px 我尝试过的例子是 body margin top 3rem l wrap max width 1280px margin rig

  • TYPO3 显示子页面的内容，包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do

  • 我可以在不同浏览器中获得一致的 CSS 颜色吗？

    我正在测试一个新网站 并且我有一个 div background color bbf6bb 这对我来说似乎无害 然而 在我的 MacBook Pro 上 Firefox 3 6 与 Safari 4 中的颜色看起来非常不同 在 Safari

  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr

  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di

  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我

  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整

随机推荐

  • 将画布对象保存为 json

    我将如何序列化画布对象 如下所示 context beginPath context rect 188 50 200 100 context fillStyle yellow context fill context lineWidth 7

  • ConditionalAttribute 和其他特殊类

    The ConditionalAttribute可用于根据定义的编译器符号删除对标记方法的调用 我假设我们无法自己创建此类 因为编译器必须专门寻找它 我想知道编译器或语言使用的其他类是我们无法自己编写的 除了提到的那些之外 Attribut

  • puppeteer 通过启用 cookie 和 Javascript 绕过 cloudflare

    仅在 NodeJs gt 服务器端 我正在做一些网页抓取 一些页面受到 cloudflare anti ddos 页面的保护 我正在尝试绕过此页面 通过搜索 我发现了很多关于隐身方法或 reCapcha 的文章 但问题是 cloudflar

  • 如何从根 Angular 对象获取 $rootElement

    我的目标是找到任意 Angular 项目中的根元素 如果我所拥有的只是angular目的 这显然不太合规 所以一个破解的解决方案就可以了 我的第一个方法是find ng app 但这在引导应用程序上失败 我一直在尝试各种角度模块 但陷入了僵

  • MongoDB 如何查找哪个多边形包含指定点？

    我将许多多边形插入MongoDB 2 4 8 并希望找到指定点所在的多边形 这似乎是一个常见问题 但在阅读了谷歌的所有文档后 我没有得到结果 所以提出这个问题 e g db addr poly insert loc type Polygon

  • 我们可以在 标签内添加

    当我在锚标记内编写 html 代码时 我的 Dreamweaver 编辑器在锚标记中显示错误 不应该使用内部标签吗 编写 使用标签有什么规则吗 我正在使用 Html 5 这是我的代码 http jsfiddle net CfPnj http

  • 如何根据Json反序列化JArray数据创建DataTable？

    我有以下 JArray 数据 我需要根据 Jarray 中的列名动态创建一个数据表 然后我需要插入数据 你能帮我做这个手术吗 pre PID 3 FirstName parveen LastName a Gender male PID 8

  • 尝试升级到 1.22 时 MediaWiki DB 连接错误

    我在共享主机服务器上安装了 MediaWiki 它的版本是 1 19 1 我正在尝试更新到 1 22 2 文档表明一步更新应该可以解决此问题 我已经在过去的更新中成功完成了几次此操作 并且正在遵循以前的注释 我建立了一个新目录 其中包含1

  • 将 .keystore 转换为 .jks 以签署 apk

    我有一个 Android 应用程序 我试图使用 quixxi com 来保护它 但它要求我再次签署该应用程序 但要做到这一点 它必须使用 jks 文件 但我的密钥库是 keystore 我在 C 中使用 Xamarin Android 和

  • 想要隐藏 Jackson 映射到 JSON 的对象的某些字段

    我有一个 User 类 我想使用 Jackson 将其映射到 JSON public class User private String name private int age private int securityCode gette

  • 如何阻止链接在 Gmail 的集成迷你浏览器中打开

    在 Android 上 当用户使用 Gmail 打开邮件并单击邮件中包含的链接时 该 URL 会在某种 迷你浏览器 中打开 顶部有一个特殊的栏 就我而言 URL 是可移植 Web 应用程序 PWA 应在 Chrome 浏览器本身中打开 使用

  • CardLayout 中的可滚动 JPanel？

    我一直在寻找一种方法来添加垂直滚动条JPanel依次添加到CardLayout控制板 我查找了这里所有与实现可滚动相关的帖子JPanel但我不知道如何用这个特定的方法来实现它CardLayout Oracle 也没有给出我可以使用的示例 也

  • sparql 主题的完整树

    例如 当我有一个人图时 例如约翰和约翰有工作地址 家庭地址 电话号码 关系等 是否有可能在不知道它是什么的情况下检索与 john 及其子类相关的所有内容 这样我就可以检索例如以下内容 John lt address lt house num

  • 为什么 ++x 是左值而 x++ 是右值？ [复制]

    这个问题在这里已经有答案了 所以我一直在阅读左值和右值 我对两者之间的区别有点困惑 x and x 当谈到这个分类时 Why is x左值和x 右值 x返回对您增加的对象的引用 其中x 返回一个临时副本x的旧值 至少这将是按照惯例实现这些运

  • Android WebView Java-Javascript 桥接器

    我想知道是否可以从Java代码中获取Javascript变量值 换句话说 我在 WebView 中有 JS 代码 并且我需要能够从 WebView 的 JS 代码获取变量 是的 可以通过安装 Java JS 桥 然后将 JS 注入到收集数据

  • 非常纠结 cocoapods / ruby​​ 设置

    这工作正常 然后突然就不行了 我希望我知道为什么 真的卡住了 在网上找不到任何东西 我正在开发一个 ObjectiveC 项目 我尝试用以下方法重置一切 sudo gem uninstall ruby sudo gem uninstall

  • 实体框架花费大量时间初始化模型

    我面临 EF 花费大量时间 跨越数小时 来初始化模型的问题 该模型如下所示 大约有 20 个类从 A1 派生 大约 30 个类从 A2 派生 我必须从 TPT 战略转向 TPH 战略解决问题 https stackoverflow com

  • Swift 中的 NSExpression 计算器

    我正在尝试复制需要用Objective C写计算器 https stackoverflow com questions 15090475 need to write calculator in objective c在 Swift 中 但我

  • 使用 ArrayList 将文本文件拆分并存储到数组中

    我一直在开发一个测验应用程序 它使用文本文件来存储问题 问题的格式如下 QUESTION CHOICE A CHOICE B CHOICE C CHOICE D ANSWER 我希望它读取每一行并将其分成 6 个不同的部分 作为分割字符串并

  • 为什么这个 Flexbox 布局在 Safari 中会被破坏？

    所以我在 CSS 中设计了这个 想法是有一个标题 其余部分作为可滚动内容 有一个链接到现场演示在底部 Alas in Safari it is broken and looks like this 可以看到 表头的高度计算错误 导致绿框溢出

热门标签