Safari中的Safari相对位置

Question

我已经在iOS 10上测试了Safari 602.1，因为我没有其他设备。我使用Bootstrap 4.1，我在列中有相对定位元素的问题。我试过自动添加Bootstrap前缀，它没有帮助。

文字根本没有定位。

来自iPhone的屏幕：

除了Safari之外，它无处不在，我绝望了。

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

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

提前致谢

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>