asp.net - ajax 选项卡容器 CSS 显示不正确

Question

我正在使用 AJAX 选项卡容器，如下所示。我有一个 CSS 来格式化选项卡面板标题。我在那里使用了图像(浅蓝色)。现在我想要两件事:1.我想摆脱虚线框2. 我想让选中的标签变成淡蓝色。 (我知道浅蓝色图像出现在背景中。只是它没有出现在所选选项卡上)

 <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" 
                    CssClass="ajax__tab_lightblue-theme">
                    <asp:TabPanel runat="server" HeaderText="My Profile" ID="tbpnlMyProfile">
                        <HeaderTemplate>
                            My Profile</HeaderTemplate>
                        <ContentTemplate>
                            <table style="width: 100%;">
                                <tr>
                                    <td class="colwid colht">
                                         <strong><a href="#" id="lnkEditMyInfo" class="small-heading">Edit My Info</a>
                                        </strong>
                                    </td>
                                    <td>
                                        &nbsp;<asp:Label ID="lblFirstNameMyProfile" runat="server" Text="First Name"></asp:Label>
                                    </td>



.ajax__tab_lightblue-theme .ajax__tab_header 
{
font-family:arial,helvetica,clean,sans-serif;
font-size:small;
border-bottom:solid 5px #c2e0fd;
}
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_outer 
{
background-image:url('Images1/lightblue.jpg') #d8d8d8 repeat-x;
margin:0px 0.16em 0px 0px;
padding:1px 0px 1px 0px;
vertical-align:bottom;
border:solid 1px #a3a3a3;
border-bottom-width:0px;
}
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_tab
{    
color:#000;
padding:0.35em 0.75em;    
margin-right:0.01em;
}
.ajax__tab_lightblue-theme .ajax__tab_hover .ajax__tab_outer 
{
background-image: url('Images1/lightblue.jpg') #bfdaff repeat-x left -1300px;
}
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_tab 
 {
color:#000;
}
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_outer
{
background-image:url('Images1/lightblue.jpg') #ffffff repeat-x left -1400px;
}
    .ajax__tab_lightblue-theme .ajax__tab_body 
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
padding:0.25em 0.5em;
background-color:#ffffff;    
border:solid 1px #808080;
border-top-width:0px;
 }

Answer 1

虚线框来自 outline，这是一个浏览器特定的特性，所有浏览器呈现不同。您可以通过添加样式 outline:none; 来禁用它。话虽如此，我不会推荐它，因为残障人士在浏览网站时会依赖它。

至于地址簿标签下的空间。这很可能是一些不需要的填充或边距。将地址簿的边距和填充设置为 padding:0; 和 margin:0;，看看会发生什么。

对您的评论的答复:

嗯，我没有看到“我的个人资料”和“地址簿”的标记。所以我假设这是一些“开箱即用”的 ASP.NET 东西。但是您需要将其添加到“我的个人资料”和“地址簿”链接中。

假设您生成的 HTML 是这样的:

<ul>
   <li><a href="">My Profile</a></li>
   <li><a href="">Address Book</a></li>
</ul>

您可以像这样向您的元素添加一个类: (注意类 tabednav)

<ul class="tabednav">
   <li><a href="">My Profile</a></li>
   <li><a href="">Address Book</a></li>
</ul>

然后将 CSS 添加到您的样式表:

.tabednav li a {outline:none;}