Проблема в IE7, реализация вкладок.

rabiter · March 25, 2011

Добрый день!

Помогите пожалуйста, у меня проблемы с IE7.

Делаю вкладки, для них использую список с display:inline

Сама вкладка состоит из двух ссылок (одна - название, вторая - кнопочка закрыть).

Если по горизонтали не хватает места, то вкладки переносятся на следующую строку. Но сама вкладка должна быть неделима, т.е. между ссылкой-названием и ссылкой-кнопкой не должно быть переноса строки.

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
<style>
 li {display:inline;float:left;BACKGROUND-COLOR:pink;border:1px solid red;}
 div#d {position:absolute;left:100px;top:100px;width:220px;background-color:yellow;}
</style>

<div id="d">
<ul>
<li><a href="#">My Search 1</a><a  href="#">X</a></li>
<li><a href="#">My Search 2</a><a  href="#">X</a></li>
<li><a href="#">My Search 3</a><a  href="#">X</a></li>
<li><a href="#">My Search 4</a><a  href="#">X</a></li>
<li><a href="#">My Search 5</a><a  href="#">X</a></li>
<li><a href="#">My Search 6</a><a  href="#">X</a></li>
<li><a href="#">My Search 7</a><a  href="#">X</a></li>
<li><a href="#">My Search 8</a><a  href="#">X</a></li>
<li><a href="#">My Search 9</a><a  href="#">X</a></li>
<li><a href="#">My Search 10</a><a href="#">X</a></li>
<li><a href="#">My Search 11</a><a href="#">X</a></li>
<li><a href="#">My Search 12</a><a href="#">X</a></li>
</ul>
</div>
 </body>
</html>

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

FireFox (видно что все вкладки отображаются каждая на новой строке, так как не хватает места по-горизонтали):

IE7:

Проблема в том, что в IE7 если вкладка не помещается, то внутри нее происходит перенос на другую строку, что мне совсем не нужно.

PS конечно можно внутри вкладки табличку использовать с двумя TD элементами, но решение кажется не очень хорошим.

PS2 li {white-space:nowrap; ... } не поможет в данном случае. Так как в качестве кнопочки "закрыть" будет использоваться span с картинкой и с указанной шириной, а white-space только на текст действует.

psywalker · March 25, 2011

А если display: inline-block; на спан повесить, а родителю li {white-space:nowrap; ... } ?

rabiter · March 25, 2011

А если display: inline-block; на спан повесить, а родителю li {white-space:nowrap; ... } ?

Спасибо за ответ!

На самом деле проблему мне только что помог решить коллега с предыдущего места работы. Именно с использованием inline-block.

Только как я понял в IE7 inline-block работают криво. А если элемент сделать инлайновым (*display:inline), и навесить сверху haslayout (*zoom:1), то этот блок ведет себя практически полностью как инлайн-блочный.

 li {
     display:inline-block;
     background:pink;
     border:1px solid red;
     white-space:nowrap;
     *display:inline;
     *zoom:1;
    }

psywalker · March 25, 2011

Да, всё верно. Но это касается только блочных элементов, у строчных такой проблемы нет.

rabiter · March 25, 2011

Да, всё верно. Но это касается только блочных элементов, у строчных такой проблемы нет.

Спасибо!

psywalker · March 25, 2011

Спасибо!

Пожалуйста.

Sign In

Проблема в IE7, реализация вкладок.

Question

rabiter

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

rabiter

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

rabiter

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information