Question

我正在使用ui标签。在我的上一个项目中，我在标签前添加了一个图标，标签链接开始出现奇怪的行为，如果你在标签名称之上，则无法点击更改标签但是只有当你是外部标签名称。

这是代码

<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
   <!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
    <img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>

<div  id="tabs" >   
    <ul >
        <li >
            <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
            <a href="#tab-1"><span id="tabContent-1"><span class="tabText" >TAB1</span></span></a>
        </li>
        <li >
            <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
            <a href="#tab-2"><span id="tabContent-2"><span class="tabText" >TAB2</span></span></a>
        </li>
    </ul>               

    <div id="tab-1" >
        contents    
    </div>
    <div id="tab-2" >
        contents    
    </div>

</div><!--tabs-->

我知道ui.css对标签有相对位置

    .ui-tabs .ui-tabs-nav {
        list-style:none outside none;
        padding:0.2em 0.2em 0;
        position:relative;
   }

我不知道是否与我的图标啮合。

如果我删除位置：相对于图标（add.gif）一切正常

感谢任何帮助

Answer 1

从您发布的代码中，如果我已正确理解您的问题，则图标div中的“top：30px”会干扰您的标签。未声明图标图像高度，但我假设它小于30px。因此，假设您的图标的z-index为1，它将显示在选项卡的顶部。

如果图标与选项卡显示在同一行，则可能仍会出现这种情况，因为没有为图标的父div声明宽度。这意味着它可能占用整行。

有几种方法可以解决这个问题，但我认为您最适合提出正确的解决方案，具体取决于您的确切效果。罪魁祸首似乎是“顶级：30px”，将div推低30px。如果删除它，您也可以从同一个div中删除“position：relative”。

希望有所帮助。

Answer 2

很可能IE hasLayout错误并且图像没有强制标签的高度按预期更改。这可以通过将zoom：1添加到任何位置来修复：相对元素。

另外，您可能需要添加4个规格的填充，如此...

    .ui-tabs .ui-tabs-nav {
    list-style:none outside none;
    padding:0.2em 0 0.2em 0;
    position:relative;
    zoom:1; }

希望有所帮助！

ui标签和位置相对

2 个答案: