Ajax Tabcontainer Header 在 Chrome 中被切断

Question

解决了。下面的问题和我可以概述的简单修复。

Visual Studio 2013 + AjaxToolkit 4.5.7.1213(最新稳定版)。

Web 表单应用程序。我有一个非常简单的页面。它在 IE 兼容性 View 或 Chrome 的 IE 选项卡扩展中完美呈现。但是，在 Chrome 33.0.1750.154(几周前的版本)或 IE 11 中，tabcontainer 中选项卡的标题被水平切断；底部只是不存在。我用谷歌搜索过，不久前其他人也遇到过类似的问题，但似乎没有什么可以轻松解决的。如果我使用选项卡面板的内联 HeaderText 或 Header Text 部分并不重要，同样的事情会发生。



我发现如果我停止使用 bootstrap.css，问题就解决了。
这是问题所在:

Ajaxtoolkit 有自己的 CSS，这可以通过在线查看 tabcontainer 的源代码来观察:
http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Server/AjaxControlToolkit/Tabs/Tabs_resource.css

ajaxToolkit:TabContainer 使用的默认 css 类是 .ajax__tab_tab。有问题的代码在 .ajax__tab_tab 中。它指定的高度为 13px。这切断了文本。如果我将它增加到 18 像素(默认字体大小)，没有问题。

由于ajaxToolkit:TabContainer的cssclass是可以指定的，所以我做的就是把ajaxToolkit站点的大部分.ajax__tab_xp拷贝出来，重命名为.customAjaxTab，放到我自己的.css文件中，然后设置CssClass="customAjaxTab"在我的 TabContainer 中。

不幸的是，TabContainer 默认 css 调用的图像使用了我没有开始工作的“WebResource”调用，所以我制作了我的图像。我的新CSS:

.customAjaxTab .ajax__tab_disabled { cursor: default; color: #A0A0A0; }
.customAjaxTab .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(Images/Tab_bottomline.png) repeat-x bottom;height:21px; }
.customAjaxTab .ajax__tab_header .ajax__tab_outer {padding-right:4px;background:url(Images/Tab_unselected.png) no-repeat right;height:21px;}
.customAjaxTab .ajax__tab_header .ajax__tab_inner {padding-left:3px;background:url(Images/Tab_unselected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_tab {height:18px;padding:4px;margin:0px;color:black;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_outer {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_inner {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_tab {cursor:pointer;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_outer {background:url(Images/Tab_selected.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_inner {background:url(Images/Tab_selected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_tab {color:black;}
.customAjaxTab .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

这个链接有更多关于 TabContainer 的自定义 css:
http://www.asp.net/ajaxlibrary/act_TabContainer.ashx

Answer 1

这对我有用，添加 bootstrap.css 和 bootstrap.min.css

.ajax__tab_tab
{
     -webkit-box-sizing: content-box!important;
     -moz-box-sizing: content-box!important;
     box-sizing: content-box!important;
}