вкладки пользовательского интерфейса и положение относительно

Question

Я часто использую вкладки пользовательского интерфейса. В моем последнем проекте я добавляю значок непосредственно перед вкладками, и ссылки вкладок начинают странное поведение, вы не можете щелкнуть, чтобы изменить вкладки, если вы находитесь над именем вкладки, НО только когда вы внешнее имя вкладки.

Вот код

<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

Скорее всего, это ошибка IE hasLayout , и изображение не заставляет высоту вкладки изменяться, как ожидается. Это можно исправить, добавив масштаб: 1 к любой позиции: относительные элементы.

Также вы можете добавить заполнение с 4 спецификациями, например так ...

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

Надеюсь, это поможет!

Answer 2

Из кода, который вы разместили, и, если я правильно понял вашу проблему, "top: 30px" в вашем значке div мешает вашим вкладкам. Высота изображения иконки не объявлена, но я предполагаю, что она меньше 30 пикселей. Поэтому, учитывая, что ваш значок имеет z-индекс 1, он будет отображаться в верхней части вкладок.

Если значок должен отображаться в той же строке, что и вкладки, это все равно может произойти, поскольку ширина для родительского элемента div не объявлена. Это означает, что может занять весь ряд.

Есть несколько способов исправить это, но я думаю, что вы находитесь в лучшем положении, чтобы найти правильное решение, в зависимости от того, какой именно эффект вы добьетесь. Похоже, виновником является «top: 30px», что приводит к уменьшению div на 30px. Если вы удалите это, вы, вероятно, также можете удалить «position: родственник» из того же самого div.

Надеюсь, это поможет.