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

Question

我也在看这个问题IE renders inline-block div differently than FF/Chrome，但这帮不了我。

这是我的元素的 CSS 代码（在 html 中它是一个不可见的正方形 link）：

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

隐形方块link比FF/Chrome定位高约200px

Answer 1

没有看到您的整个标记和样式表。我建议，如果您还没有这样做，请使用以下方法重置所有填充和边距：

* { 
  margin: 0; 
  padding: 0; 
}

无论浏览器如何，它都会删除页面上每个对象的所有默认边距和填充。这为设计提供了一个干净的平台，并确保所有间距都是有意的、明确的并且在浏览器中普遍存在。没有理由不这样做。

您始终可以使用 -webkit-margin(s)（即之前、之后、开始、结束）。 -moz-margin.

也是如此

Answer 2

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

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

对我来说，在所有浏览器中，link 呈现在底部上方 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>

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

Element "inline-block" has different position when used in IE or Microsoft Edge

html

css

internet-explorer

microsoft-edge