Bootstrap 3, left sidebar menu, ghosting borders

Question

Good day.

I have a bootstrap 3 sidebar and I am testing in IE 11. I'm am getting a weird ghosting effect on the border of the sidebar. When the page is first rendered just the bottom edge of the sidebar is shown...as I mousehover over the collapsible items, the right edge of ghosting appears and then stays until the page is refreshed. The image looks like this .

Note that the choice of colors was done here just to highlight the ghosting edges that show up. :)

The CSS associated with the sidebar is shown below (note that the div section "panel sidebar" is repeated 3 times, once for each of the 3 main collapsible menus and is not shown here for brevity):

    <div class="row-offcanvas row-offcanvas-left active">
    <div class="sidebar-offcanvas" id="sidebar" style="overflow-y:hidden; background-color:fuchsia;">
        <div class="col-md-12 left-menu">
            <div class="panel affix" id="accordion">
                <div class="panel sidebar">
                    <div class="panel-heading unselectable" unselectable="on">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Group 1</a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in">
                        <table class="sidebarTable">
                            <tr>
                                <td>
                                    <a href="#">Orders</a> <span class="label label-success">$ 320</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#">Invoices</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#">Shipments</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#">Tex</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

Any help would be greatly appreciated as I've tried many combinations of setting borders: none, outline: none, etc.

Answer 1

You could try to target IE10+ with this specific CSS styles.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Answer 2

My bad and missed this because I am so new to css and bootstrap...the bootstrap panel definition had box-shadow defined and when I set it to

box-shadow:none;

The world was returned to it's previous stability.

Btw, I determined this by picking up a hint from another post indicating to hit F12 in the browser to expose the actual styling that was being applied.

Cheers.