css - AJAX 选项卡容器样式在 IE 11 中无法正常工作

Question

我前段时间找到了这个链接，并在不同的元素中使用了 AJAX 选项卡容器控件的样式，这些年来发生了变化:

http://www.c-sharpcorner.com/uploadfile/raghavau/css-style-sheet-for-ajax-tabcontainer-control-in-Asp-Net-2-0/

该链接仅供引用，但我遇到的问题是在 IE 11 中。 它在 FF 和 Chrome 中工作正常。

问题是，在 IE 中查看时，选项卡的左侧和右侧(图像)具有更大的高度。这会在内部部分所在的每个选项卡底部留下空隙。

想象三张图片。左右为20px，内部为17px，均在顶部对齐。我检查过，所有图像的高度都相同。

在事件选项卡的文本周围还有一个可见的虚线框，这个虚线框的底部恰好与重复的内部图像的底部对齐。除了图像之外，事件、悬停和非事件样式都是相同的。

这是一些用于查看非事件选项卡的 css，但它在所有选项卡上执行相同的操作，无论是否处于事件状态。

/*Header*/
.Tab .ajax__tab_header {
    color: #4682b4;
    font-family: Calibri;
    font-size: 14px;
    font-weight: bold;
    margin-left: 0px;
    white-space: nowrap !important;
}
/*Body*/
.Tab .ajax__tab_body
{
    border:1px solid #b4cbdf;
    padding-top:0px;
    min-width:900px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
    color: #666666;
    background:url("../images/tab_Inactive.gif") repeat-x;
    height:20px;
    display:block;
    line-height:20px;
}
.Tab .ajax__tab_inner
{
    color: #666666;
    background:url("../images/tab_left_inactive.gif") no-repeat left;
    padding-left:4px;
}
.Tab .ajax__tab_outer
{
    color: #666666;
    background:url("../images/tab_right_inactive.gif") no-repeat right;
    padding-right:4px;
    margin-right: 2px;
}

我一直在到处寻找解决方案，甚至比我更了解样式的同事也不知道为什么它在 IE 11 中无法正常工作。

感谢您的任何建议。

编辑:首先解决选定选项卡周围的虚线框。只需要添加 outline: 0px;

仔细观察，中间的图片背景并没有变小，只是位置并没有在底部。添加 background-position: bottom; 没有帮助。

Answer 1

终于找到了解决办法，想贴出来给大家看看。 当我注意到图像并没有变小而是凸起时，我仔细观察了其他元素。 IE 11 所需要的只是 vertical-align: bottom; 将其添加到所有选项卡样式(悬停、事件、非事件、内部、外部、选项卡)就可以了。