Bootstrap popover (placement: 'top') behaviors incorrect in IE8

问题

Here's the javascript code of the pop-over part:

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

And the screenshot of it from IE8:

There's a small white triangle above the button, which shouldn't be there.

And I noticed the tutorial page of Bootstrap has the same issue. But when the placement is 'right', it just works fine in IE8.

So is this a common bug? Do we have some workaround for this?

回答1:

I have tested this example with IE8 and it worked perfectly:

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"
});

You can try it here.

The triangle you mention is present even if the placement is "right" and appears on Firefox too, although is the same colour as the popover background. So it's a bug.

回答2:

Replace your Jquery declaration with this, you missed a comma:-

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

回答3:

I had issue with bootstrap popover (positioned left) in IE8 browser with double callout arrow pointer (not in IE9 with Browse mode IE8 and document mode IE8 standards).

I could fix this issue with IE8 fallback support CSS

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

Hope this would help.

来源：https://stackoverflow.com/questions/16853386/bootstrap-popover-placement-top-behaviors-incorrect-in-ie8

标签

javascript

twitter-bootstrap

internet-explorer-8

popover