【问题标题】:Safari issue with justify-content: flex-end; align-items: flex-end;justify-content: flex-end 的 Safari 问题;对齐项目:flex-end;
【发布时间】:2013-12-06 17:00:15
【问题描述】:

我正在设计一个信使布局,我正在努力修复 Safari 上的一些问题,因为这似乎是一个兼容性问题。

http://animgram.com/fb/index.html 如果您在 Google Chrome 和 Safari 上打开此链接。谷歌浏览器是正确的视图,但在 Safari 上显示不正确。

我正在努力设置这个类。

.self {
justify-content: flex-end;
align-items: flex-end;
}

请注意:只有 Safari 是问题所在。 IE、Chrome 和 Firefox 完全没问题。

【问题讨论】:

  • 请注意正确的标记。这与 Adob​​e/Apache UI 框架无关,所以我删除了 Flex 标签。我怀疑它与 CSS 框架的 FlexBox 相关;所以我添加了 Flexbox 标签。如果不正确,您可以更正标记。
  • 哪个版本的 Safari?
  • 适用于 Windows 5.1.7 的最新版本

标签: html css safari flexbox


【解决方案1】:

Safari

.foo {
    display: -webkit-box;
    -webkit-box-pack: start; /* justify-content */
    -webkit-box-align: start; /* align-items */
}

这可能会有所帮助:https://gist.github.com/cimmanon/727c9d558b374d27c5b6

【讨论】:

    【解决方案2】:

    使用-ms-flex-align: end !important;

    【讨论】:

    • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
    猜你喜欢
    • 2022-01-15
    • 2021-10-19
    • 1970-01-01
    • 2015-12-13
    • 1970-01-01
    • 2019-05-29
    • 1970-01-01
    • 1970-01-01
    • 2020-05-11
    相关资源
    最近更新 更多