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的源代码来观察： 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： 解决方法
这对我有用,添加了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;
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |