Question

大家好，所以我有一个简单的图像，然后我有一个重叠它的按钮，它在所有平台上工作正常，但由于某种原因，当我启动我的网站时它在IE或我的iPhone上根本不工作。按钮就位于图片的右侧，我不知道为什么IE会这样做但是如果有人可以帮我修复它的bug，那就太棒了

HTML：

  <div class="aboutpic">
    <img src="Images/back2.jpg" class="img-responsive">
    <a href="CV.pdf" button type="button" class="btn btn-warning">Download Resume</a>
  </div>

CSS：

.btn-warning {
  color: #fff;
  background-color: rgba(255, 198, 0, 0.9);
  border: 0;
  padding: 23px;
  border-radius: 34px;
  line-height: 0.428571;
  position: absolute;
  z-index:1;
}

.aboutpic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 59px;

}

这再次适用于谷歌，Chrome和手机等，但不是iN IE或我的iphone 6+，我真的不知道如何解决它

谢谢

Answer 1

在IE 10中不支持

flex，您必须使用-ms-flex。

Answer 2

正如其他答案所述，IE中不支持flex。如果您使用<div class="product-container"> <div class="product-preview"> <img class="product-preview-picture" src="http://miniimg8.rightinthebox.com/images/384x384/201210/pldeyv1350894557095.jpg" alt="TRASIG BILD"> <p class="product-preview-text">Best chewing gum ever!</p> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> <div class="product-preview"> </div> </div>，则可以轻松地将文本置于翻译和位置中心

你的HTML也不正确（a中的按钮），因为

您没有打开/关闭按钮标签。
position:absolute内的嵌套按钮无效html

见下文

.btn-warning {
  color: #fff;
  background-color: rgba(255, 198, 0, 0.9);
  border: 0;
  padding: 23px;
  border-radius: 34px;
  line-height: 0.428571;
  position: absolute;
  z-index:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}

.aboutpic {
 position:relative;
 text-align:center;

}

或＆gt; jsFiddle

图像在IE上不重叠

2 个答案: