Почему компоновка изменяется в IE, когда UL один в TD и имеет дополнительный пустой DIV?
-
06-07-2019 - |
Вопрос
Я добавляю навигацию по вкладкам на основе CSS на сайт, который все еще использует макет на основе таблиц. Когда я размещаю свой список вкладок внутри td, появляется визуальный & Quot; gap & Quot; что ты можешь видеть. Если я добавлю пустой тд с шириной: 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? со скриншотом чтобы люди могли видеть, о чем я говорю.
Вот скриншот:
Решение
Разрыв вызван забавными способами IE со списками. Поскольку теги ul
могут содержать только <li>
, IE, по-видимому, также считает, что пробел между элементами списка неуместен и перемещает его внутри предыдущего элемента списка, в вашем случае, следуя <a>
.
Это приводит к тому, что белый фон выбранной вкладки перекрывает нижнюю границу <ul>
(из-за ее расположения).
Похоже, что самый простой способ решить эту проблему в этом примере - просто удалить цвет фона на ul.tabnav li.current
. На самом деле, я думаю, что вы можете удалить весь этот набор правил, поскольку граница тоже ничего не делает.
Если ничего из этого не поможет вам исправить это на реальном сайте, последним средством может быть избавление от всех пробелов за пределами тегов <=>. Например.
<ul><li><a>Home</a></li><li>etc.</li></ul>
или что-то вроде этого, если вы хотите сохранить некоторое подобие форматирования:
<ul><!--
--><li><a>Home</a></li><!--
--><li>etc.</li><!--
--></ul>
Но этот пробел также является единственным, который отвечает за расстояние между вкладками, поэтому вам нужно добавить правильное поле, чтобы вернуть его обратно.