ajax中的container,Ajax Tabcontainer Header切断了Chrome-CSDN博客

博客讲述了在Visual Studio 2013中使用Ajax Toolkit 4.5.7.1213时遇到的一个问题，即TabContainer在Chrome和IE11中标签标题被截断。作者发现问题出在默认CSS类的高度设置上，并提供了自定义CSS的解决方案，通过修改高度和背景图片来适配不同浏览器，从而避免了标题被切断的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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：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;}