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

无需查看整个标记和样式表。我建议，如果您还没有完成，请使用以下方法重置所有填充和边距：

* { 
  margin: 0; 
  padding: 0; 
}

它会删除页面上每个对象的所有默认边距和填充，而不管浏览器是什么。这为设计提供了一个很好的清晰平板，并确保所有间距都是有意的，明确的，并且在浏览器中无处不在。没有理由不这样做。

您始终可以使用-webkit-margin（s）（即之前，之后，开始，结束）。同样适用于-moz-margin。

Answer 2

这里有一个小提琴，你也可以在每个浏览器中查看。我添加了一个带有条纹的父div，并在隐形链接周围添加了一个红色轮廓，以便我们有一些参考点。

隐形方形链接比FF / Chrome定位高约200px。

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

元素＆＃34;内联块＆＃34;在IE或Microsoft Edge中使用时具有不同的位置

2 个答案: