Question

当我在iphone（iphone 6，ios 8）中查看以下结果时，加载程序略微位于按钮的上方，但是当我使用chrome移动模拟器进行检查时，我看不到它。我不知道如何解决这个问题，您认为问题的原因是什么？

img.loader {
    text-align: center;
    width: 20px;
    margin: auto;
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
}
button {
    width: 100%;
    padding: 12px;
    background: #4aa3df;
    color: #fff;
    border: none;
    font-size: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box;
}
.submitBtnWrap {
    position: relative;
}

<br>
<br>
<div class="submitBtnWrap">
    <button id="login_submit" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    <img src="http://i.imgur.com/ScvlxYo.gif" class="loader">
</div>

Answer 1

在容器元素submitBtnWrap

中尝试填充0和边距0

但问题是绝对定位......

Answer 2

如果您使用了右侧的内容，请参阅此Example：

img.loader {
  text-align: center;
  width: 20px;
  float:right;
  margin:0;
}
button {
  width: 100%;
  padding: 8px;
  line-height:20px;
  background: #4aa3df;
  color: #fff;
  border: none;
  font-size: 14px;
  vertical-align:middle;
  cursor: pointer;
  box-sizing: border-box;
}
.submitBtnWrap {
  position: relative;
}

ios设备上的Css填充/边距问题

2 个答案: