Почему компоновка изменяется в IE, когда UL один в TD и имеет дополнительный пустой DIV? - PullRequest
Новая
       17

Почему компоновка изменяется в IE, когда UL один в TD и имеет дополнительный пустой DIV?

1 голос
/ 31 июля 2009

Я добавляю навигацию по вкладкам на основе css на сайт, который все еще использует макет на основе таблиц. Когда я помещаю свой список вкладок в тд, появляется визуальный «пробел», который вы можете увидеть. Если я добавлю пустой тд с шириной: 100% в тд, мой список вкладок будет отображаться правильно. (Он также отлично работает за пределами стола.)

Почему div позволяет правильно размещать вкладки, и есть ли лучший способ заставить их делать это без добавления div без содержимого?

Вот мой тестовый пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>
    Strange gap
</title>
   <style type ="text/css" >
/* stolen from http://unraveled.com/publications/css_tabs/, then hacked to death */

ul.tabnav { /* general settings */
border-bottom: 1px solid #cbcbcd; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
margin: 3px 0px 0px 0px; /* Right on top of the next row */
}

ul.tabnav li { /* do not change */
display: inline;
}

ul.tabnav li.current { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
/* border: solid 1px red; */
}

ul.tabnav li.current a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #cbcbcd; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #cbcbcd; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

/* end css tabs */
    </style>         
    </head>
    <body>

            <table>
                <tr>
                    <td>
                    I'm making some tab navigation with css. I copied the code 
                    from <a href=" http://unraveled.com/publications/css_tabs/"> http://unraveled.com/publications/css_tabs/</a>,
                    and hacked it up. There's an odd behavior that I see on IE (v 7).
                    There's a gap below.

                    </td>
                </tr>
                <tr>
                <td>
                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a >Search</a></li>
                        </ul>
                </td>
                </tr>
                <tr>
                    <td>

                    No gap below this

                    </td>
                </tr>
                <tr>
                <td  >
                <div style="width: 100%"><!-- This div forces the menu to render properly in IE7. I don't know why --></div>
                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a>Search</a></li>
                        </ul>
                </td>
                </tr>
                <tr>
                    <td>

                    why? The difference is the presence of a div with style="width: 100%" on it in the second 
                    case. I don't know why this fixes the rendering; I'd like a better way to do it without adding an 
                    extra empty div. This page should be in standards mode (or at least non-quirks mode).

                    </td>
                </tr>
            </table>

            For comparison, it works fine outside of a table:

                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a >Search</a></li>
                        </ul>

    </body>
</html>

Я теперь разместил это в своем блоге: Кодирование, управляемое беконом: почему компоновка изменяется в IE, когда UL находится в одиночку в TD по сравнению с дополнительным пустым DIV? со скриншотом, чтобы люди могли посмотри, о чем я говорю.

Вот скриншот:

Mind the Gap

1 Ответ

0 голосов
/ 11 августа 2009

Разрыв вызван забавными способами IE со списками. Поскольку теги ul могут содержать только <li> s, IE, по-видимому, также считает, что пробел между элементами списка не подходит, и перемещает его внутри предыдущего элемента списка, в вашем случае, следуя <a>.

Это приводит к тому, что белый фон выбранной вкладки перекрывает нижнюю границу <ul> s (из-за ее расположения).

Похоже, что самый простой способ решить эту проблему в этом примере - просто удалить цвет фона на ul.tabnav li.current. На самом деле, я думаю, что вы можете удалить весь этот набор правил, поскольку граница тоже ничего не делает.

Если ничего из этого не поможет вам исправить это на реальном сайте, последним средством может быть удаление всех пробелов за пределами тегов <li>. Э.Г. 

<ul><li><a>Home</a></li><li>etc.</li></ul>

или что-то подобное, если вы хотите сохранить некоторое подобие форматирования: 

   <ul><!--
   --><li><a>Home</a></li><!--
   --><li>etc.</li><!--
   --></ul>

Но этот пробел также является единственным, что отвечает за расстояние между вкладками, поэтому вам нужно добавить правильное поле, чтобы вернуть его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...