html - 图像在 IE 上不重叠

Question

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

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;

}

同样，这在 google、chrome 和手机等中完美运行，但在 IE 或我的 iphone 6+ 中却不行，我真的不知道如何修复它

谢谢

Answer 1

正如其他答案所述，IE 不支持 flex。如果您使用 position:absolute，您可以轻松地将带有翻译和位置的文本居中

您的 HTML 也不正确( a 内的按钮)，因为

1. 您没有打开/关闭按钮标签。
2. a 中的嵌套按钮不是有效的 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;

}

<div class="aboutpic">
    <img src="http://via.placeholder.com/350x150" class="img-responsive">
    <a href="CV.pdf" class="btn btn-warning">Download Resume</a>
  </div>

或> jsFiddle