Mozilla和chrome中的css位置不同答案

【问题标题】：css Positions are not same in mozilla and chromeMozilla和chrome中的css位置不同
【发布时间】：2015-09-03 15:17:08
【问题描述】：

我已经为 img 标签使用了下面的内联样式。但是在 Mozilla 和 chrome 中的位置不同。

element.style {   position: absolute;   top: 118px;   LEFT: 64px; }

在 Mozilla 图像中正确显示。但在 chrome 中，图像是分散的

为什么会这样？我该如何解决这个问题？

【问题讨论】：

你能为这个问题制作jsfiddle吗？
我认为这会有所帮助。 stackoverflow.com/questions/3576624/…

标签： css google-chrome mozilla

【解决方案1】：

使用一个 div 包装器作为相对位置：-

  <div style="position:relative">
     <div style="position: absolute; top: 118px; LEFT: 64px;"></div>
  </div>

【讨论】：

【解决方案2】：

这是我在字段集中的图像上使用绝对位置所做的。从这里，更改您的右侧和顶部位置，使其在 Firefox 中适合您。（为 IE、Chrome、Safari、Opera 保留原来的类）

@-moz-document url-prefix() { 
  .classToApply{
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

这是一个 Firefox Hack，有人告诉我它适用于每个版本的 Firefox。我使用的是 Firefox 版本 33.0.2，所以我无法确认这适用于旧版本。我在我的网站上遇到了同样的问题。它在 IE、Opera、Safari 和 Chrome 中看起来是一样的。只有在 Firefox 中，我才注意到定位不同。这行得通！

【讨论】：