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

Question

我遇到了一个似乎只在 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 像素，但其他浏览器将其显示在应有的位置。由于某些原因，在 IE 11 中，指定 1px 会使元素移动大约 1.5 px，我正在努力寻找发生这种情况的原因。

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

我还应该指出，这段代码已经投入生产多年，只有在 IE 11 发布后，这个元素的定位才出现问题。

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

Answer 1

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

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

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

#depotproductpage #pricecolumn #FacebookWrapper .facebooklikebutton

问题就解决了。

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

Relative Positioning in IE 11 Incorrect Pixel Width

html

css

internet-explorer