Question

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

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 = ＆＃34; customAjaxTab＆＃34;在我的TabContainer中。

不幸的是，TabContainer默认css调用的图像使用＆＃34; WebResource＆＃34;打电话说我没有上班，所以我制作了我的照片。我的新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;
}

Answer 2

xadriel的解决方案可以工作-但是，我已经看到很多评论说“请勿修改Bootstrap.css文件”-因此我将xadriel的代码段添加到了site.css文件中，并且效果很好！（特别考虑到我正在使用CDN链接的CSS / JS，因此无法对其进行修改...）。

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

我有一个较旧的VS2008 / .NET 3.5超大型网站，我要向其中添加Bootstrap，并且我不得不通过添加本地site.css类名来覆盖一些Bootstrap设置，然后将这些自定义类名添加到需要的控件中修复（这确保更改仅在需要的地方应用，而不会影响其他区域）。一些要求！important才能确保它们被更改（即为下拉控件更改颜色/背景色，在下拉控件中应用了``窗体控件''颜色，但我不希望使用它们）。似乎没有必要在这里添加！important，因为我所做的只是将其添加到site.css中，并且可以正常工作。

Ajax Tabcontainer Header切断了Chrome

2 个答案: