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 px，但其他浏览器显示它应该在哪里。出于某些原因，在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中，like按钮会回退到<div>元素。您可以通过使用<div>设置样式来定位按钮：

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

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

#depotproductpage #pricecolumn #FacebookWrapper .facebooklikebutton

问题将得到解决。

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

1 个答案: