flex内的Safari相对位置

Question

我一直在 iOS 10 上的 Safari 602.1 上进行测试，因为我没有其他设备。我使用 Bootstrap 4.1，但在列内相对定位元素时遇到问题。我试过自动为 Bootstrap 添加前缀，但没有帮助。

文本根本没有定位。

来自 iPhone 的屏幕：

它在除 Safari 之外的任何地方都可以使用，我很绝望。

http://jsbin.com/tigowet/edit?html,css,output

.box {
    color: #ffffff;
    padding: 0.5rem;
    width: 50%;
}

.box img {
    max-width: 100%;
    max-height: 100%;
}

.box a {
    color: #ffffff;
}

.box a:hover {
    text-decoration: none;
}

.box input {
    width: 100%;
}

.bgDarkBlue {
    background-color: #3F51B5;
}

.shadowBox {
    box-shadow: 7px 5px 25px black;
}

.verticalHorizontal {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="box shadowBox bgDarkBlue">
	<a href="#">
		<div class="container-fluid">
			<div class="row">
				<div class="col-4">
					<img src="http://tusla.info/images/safari-column/evaluation.svg">
				</div>
				<div class="col-8 pl-sm-0">
					<h1 class="position-relative verticalHorizontal">Text</h1>
				</div>
			</div>
		</div>
	</a>
</div>

<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>

提前致谢

Answer 1

我没有要测试的 ios 设备，但我会将相对位置上移一级并将 .verticalHorizontal 设为绝对位置：

.box {
  color: #ffffff;
  padding: 0.5rem;
  width: 50%;
}

.box img {
  max-width: 100%;
  max-height: 100%;
}

.box a {
  color: #ffffff;
}

.box a:hover {
  text-decoration: none;
}

.box input {
  width: 100%;
}

.bgDarkBlue {
  background-color: #3F51B5;
}

.shadowBox {
  box-shadow: 7px 5px 25px black;
}

.verticalHorizontal {
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="box shadowBox bgDarkBlue">
	<a href="#">
		<div class="container-fluid">
			<div class="row">
				<div class="col-4">
					<img src="http://tusla.info/images/safari-column/evaluation.svg">
				</div>
				<div class="col-8 pl-sm-0 position-relative">
					<h1 class="verticalHorizontal">Text</h1>
				</div>
			</div>
		</div>
	</a>
</div>

<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>