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

Question

我在一段时间前发现了这个 link 并且在 AJAX 选项卡容器控件中使用了这些样式，这些年来在不同的项目中发生了变化：

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

link 仅供参考，但我遇到的问题是在 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

终于找到了解决方案并想 post 为其他人提供。当我注意到图像并没有变小而是凸起时，我仔细观察了其他元素。 IE 11 所需要的只是 vertical-align: bottom; 将此添加到所有选项卡样式（悬停、活动、非活动、内部、外部、选项卡）就可以了。

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

AJAX Tab Container style not working correctly in IE 11

css

ajax

tabcontrol