Question

前段时间我找到了这个链接，并且使用了带有AJAX Tab容器控件的样式，以及多年来在不同项目中的变化：

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;将此添加到所有选项卡样式（悬停，活动，非活动，内部，外部，选项卡）都可以实现。

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

1 个答案: