html - 元素 "inline-block"在 IE 或 Microsoft Edge 中使用时位置不同

Question

我也在看这个问题IE renders inline-block div differently than FF/Chrome但这对我没有帮助。

这是我的元素的 CSS 代码(在 html 中它是一个不可见的方形链接):

#box-scenario {
position: absolute;
margin-top: 43%;
margin-left: 37%;
background-color: rgba(255, 0, 0, 0);
width: 11%;
height: 21%;
display: inline-block; }

隐形方形链接比FF/Chrome定位高200px左右

Answer 1

这里有一个 Fiddle，供您在每个浏览器中查看。我添加了一个带条纹的父级 div，还在不可见链接周围添加了一个红色轮廓，这样我们就有了一些引用点。

The invisible square link is about 200px higher than FF/Chrome positioning.

对我来说，在所有浏览器中，链接呈现在底部上方 3.5 格处。它在哪里为您呈现？

#parent {
  outline: thin solid black;
  position: relative;
  height: 180px;
  width: 180px;
  background: repeating-linear-gradient(to top, white, white 10px, yellow 10px, yellow 20px);
}
#box-scenario {
  position: absolute;
  margin-top: 43%;
  margin-left: 37%;
  background-color: rgba(255, 0, 0, 0);
  width: 11%;
  height: 21%;
  display: inline-block;
  outline: thin solid red;
}

<div id="parent">
  <a id="box-scenario"></a>
</div>