IE 11 中的相对定位不正确的像素宽度答案

【问题标题】：Relative Positioning in IE 11 Incorrect Pixel WidthIE 11 中的相对定位不正确的像素宽度
【发布时间】：2015-02-22 21:03:47
【问题描述】：

我遇到了似乎只发生在 IE (11) 中的定位问题。我正在尝试相对于另一个元素绝对定位 div 标签。

有问题的标签如下所示：

<div id="FacebookWrapper">                
    <div class="facebooklikebutton">
        <fb:like layout="button_count" show_faces="false" width="90" font="verdana" ref="ProductPageTop"></fb:like>
    </div>
</div>

有问题的 CSS 如下所示：

#depotproductpage #pricecolumn #FacebookWrapper { display:block; position:relative; }
#depotproductpage #pricecolumn #FacebookWrapper div { position:absolute; left:260px; }

页面在线：http://www.foldingchairdepot.com/p/National-Public-Seating-200-Series-Premium-Steel-Folding-Chair---Set-of-4__NPS-200-SERIES.aspx

问题：

问题是在 IE 11 中，260px 使元素显示在右侧太远。在 FireFox 和 Chrome 中，这正是我想要的。

我尝试通过首先将其设置为left:0px 来尝试它，并且它在所有浏览器中都能正确显示，并与父 div 的左边缘对齐。我还尝试了left:50px，在这种情况下，IE 似乎将 div 移动了大约 70 px，但其他浏览器显示它应该在哪里。出于某种原因，在 IE 11 中，指定 1px 会将元素移动约 1.5 px，我正在努力寻找发生这种情况的原因。

我还尝试在元素和包装器上设置固定宽度，并尝试将其从 position:relative 更改为 position:static（指定为 here）无济于事。

我还应该指出，这段代码已经投入生产好几年了，直到 IE 11 发布后，这个元素的定位才出现问题。

如何强制 IE 11 像其他浏览器一样遵循 left:260px 绝对位置？

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

这是 Facebook 如何处理 IE11 的问题。在 Chrome 和 Firefox 中，like 按钮是一个 <fb:like> 元素，这显然是一个非标准元素。在 IE11 中，like 按钮回退到 <div> 元素。您可以通过设置<div> 的样式来定位按钮：

#depotproductpage #pricecolumn #FacebookWrapper div { position:absolute; left:260px; }

在 IE11 中，您的点赞按钮将位于 left: 520px。将 CSS 选择器更改为

#depotproductpage #pricecolumn #FacebookWrapper .facebooklikebutton

问题就解决了。

【讨论】：

谢谢。现在它完全有意义了。