Ajax Tabcontainer Header切断了Chrome

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

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

Web表单应用.我有一个非常简单的页面.它在IE兼容性视图或Chrome的IE标签扩展中完美呈现.但是,在Chrome 33.0.1750.154(几周旧版本)或IE 11中,tabcontainer中标签的标题会被水平切断;底部不存在.我用google搜索过,其他人前一段时间也有过类似的问题,但似乎没有什么能轻易解决它.如果我使用选项卡面板的内联HeaderText或标题文本部分无关紧要,则会发生同样的事情.

我发现如果我停止使用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,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

解决方法

这对我有用,添加了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;
}