IE8中的Bootstrap popover（placement：'top'）行为不正确

Question

这是pop-over部分的javascript代码：

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

来自IE8的截图：

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

我注意到the tutorial page of Bootstrap有同样的问题。但是当展示位置“正确”时，它在IE8中运行良好。

这是一个常见的错误吗？我们有一些解决方法吗？

Answer 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上，尽管颜色与弹出式背景颜色相同。所以这是一个错误。

Answer 2

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

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

Answer 3

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

我可以使用IE8后备支持CSS解决此问题

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

希望这会有所帮助。