IE8 中的引导弹出框（位置：'top'）行为不正确答案

【问题标题】：Bootstrap popover (placement: 'top') behaviors incorrect in IE8IE8 中的引导弹出框（位置：'top'）行为不正确
【发布时间】：2013-05-31 08:50:03
【问题描述】：

这是弹出部分的javascript代码：

$('#view_case).popover({
    html: true,
    placement: 'top',
    title: 'Test Cases',
    content: function() {
        return $('#case_list').html();
    }
});

以及来自 IE8 的截图：

按钮上方有一个小的白色三角形，不应该在那里。

我注意到the tutorial page of Bootstrap 也有同样的问题。但是当位置“正确”时，它在 IE8 中就可以正常工作。

那么这是一个常见的错误吗？我们有解决办法吗？

【问题讨论】：

你想让箭头的颜色是白色作为弹出容器的背景吗...？？
当然，或者我可以删除while三角形吗？
白色三角形它是通过伪类生成的......你是怎么做到的？
@SaurabhLP 你的意思是如何重现？我用的是IE8，Bootstrap的教程页面也有类似的效果。
是的，我知道，在我的 ie8 中它的显示效果很好...i.imgur.com/KpRPeBy.jpg

标签： javascript twitter-bootstrap internet-explorer-8 popover

【解决方案1】：

我已经用 IE8 测试了这个例子，它运行良好：

HTML：

<p>
    <a rel="popover" title="Here It Is" data-content="This is it!" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
        Learn more about Bootstrap
    </a>
</p>

Javascript：

$('a').popover({
    placement: 'top',
    trigger: "hover"
});

你可以try it here。

即使位置“正确”并且也出现在 Firefox 上，您提到的三角形仍然存在，尽管与弹出框背景颜色相同。所以这是一个错误。

【讨论】：

好吧，这是一个错误。。好吧，我刚刚删除了.popover .arrow.after类，白色箭头消失了，虽然在其他浏览器中样式也发生了变化，但我认为我可以这样做。跨度>

【解决方案2】：

用这个替换你的 Jquery 声明，你错过了一个逗号：-

$('#view_case').popover({
    html: true,
    placement: 'top',
    title: 'Test Cases',
    content: function() {
        return $('#case_list').html();
    }
});

【讨论】：

谢谢，我在这里重新输入时打错了。
我删除了.popover .arrow.after 类，白色箭头消失了。我只是把它当作一种解决方法。

【解决方案3】：

在带有双标注箭头指针的 IE8 浏览器中，我遇到了引导弹出框（位于左侧）的问题（不适用于带有浏览模式 IE8 和文档模式 IE8 标准的 IE9）。

我可以通过 IE8 后备支持 CSS 解决这个问题

.popover .arrow { 
    margin-right: 10px !important; /* adjusting the right position */
    border: 1px transparent; /* setting border to transparent */
}

希望这会有所帮助。

【讨论】：