代码之家 › 专栏 › 技术社区 › Charlie McShane

Flex Wrap+TransformY在Safari中不起作用

transform flexbox safari css twitter-bootstrap

Charlie McShane · 技术社区 · 7 年前

因此,我使用Flex-Wrap将引导程序3中的许多列保持在彼此相同的高度。然而,当我想将内容垂直集中在自己的列中时;在横向上,我使用以下典型代码:

.equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.centered {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

虽然这在Opera、Firefox、Chrome和Internet Explorer/Edge中完全可以正常工作。它是游猎拒绝打球 将转换代码的转换段弄乱。

我已附上 CodePen example 让你看看到底是怎么搞砸的。

1 回复 | 直到 7 年前

Dan Brazier 7 年前

太长,读不下去了 CodePen example

这里有几件事我要考虑一下。

首先,flexbox和positioning紧密结合使用时有一些怪癖,尤其是与Safari一起使用时。这里的大多数问题都解决了,但仍有一些小的、令人沮丧的事情我不时遇到。

其次,看起来您正在使用自己的一些代码来复制Bootstrap中已经存在的东西,这可能会混淆问题。

我已经构建了我的示例代码,并模糊地使用了您将在Bootstrap 4中找到的flex类,这样您可以在迁移时减轻负担。

在我看来,这里的一般概念是:

<div class="container">

    <div class="row d-flex">
    <!-- Make the row a flex wrapper, this will make columns the same height -->

        <div class="col d-flex">
        <!-- Make each col a flex wrapper, to use flex properties to dynamically center content -->
        </div>
        <div class="col d-flex">
        </div>
        <div class="col d-flex">
        </div>
    </div>
</div>

推荐文章

Aaron · IdentityServer4和运行在iOS 9.3.5上的客户端(禁用JavaScript)

7 年前

thank_K · 检测safari并停止脚本

7 年前

mattaningram · 在Safari中,框阴影颜色函数中的CSS自定义属性渲染不正确

7 年前

Dockson · iOS Safari 11.3上navigator中没有服务人员

7 年前

Emrah Åentürk · pc和移动设备之间的角度5日期时区差异

7 年前

acb1980 · 上次更新后,Safari(iOS和OS X)上的Ajax文件上传中断

7 年前

Archna Rangrej · 如何在Safari中录制HTML5视频?

7 年前

akash · 我的html背景视频未在safari中播放

7 年前

DsXack · 如何在iOS和macOS上使用Safari中的网络摄像头录制视频?

7 年前

Charlie McShane · Flex Wrap+TransformY在Safari中不起作用

7 年前