Динамическая ширина строки меню CSS в IE6 - PullRequest
Новая
       20

Динамическая ширина строки меню CSS в IE6

1 голос
/ 19 ноября 2008

У меня есть меню CSS, как это: 

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

Я хочу создать это: 

|-----------------------------------|
| Item1                             |
|-----------------------------------|
| Item Two                          |
|-----------------------------------|
| Item C                            |
|-----------------------------------|
| A Rather Long Menu Item Down Here |
|-----------------------------------|

но я получаю это: 

 -------- 
| Item1 |
|----------- 
| Item Two |
|-----------
| Item C |
|----------------------------------- 
| A Rather Long Menu Item Down Here |
 -----------------------------------

Если я установлю теги [li] или [a] для display: block, они растянутся, чтобы заполнить максимально возможную ширину. Я хочу, чтобы все они имели одинаковую ширину, которая динамически определяется самым широким элементом, а не вручную, помещая ширину в тег [ul].

О, и цель IE6. :)

Обновление:

width:1px, overflow:visible не работал. (Получил тот же эффект сдавления, что и без дисплея: заблокированные якоря.)

Это для интрасети, где IE6 является целью, поэтому я застрял там. (В других проектах я перестал беспокоиться об этом.) JS является требованием, поэтому, возможно, я буду его использовать. (Хотя я всегда ненавижу это делать.)

Ответы [ 4 ]

6 голосов
/ 19 ноября 2008

Это удивительно просто: 

<style>
ul {
float: left;
}
    ul li a {
    display: block;
    white-space: nowrap;
    border: 1px solid blue;
    }
</style>

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

Хитрость здесь заключается в комбинации плавающего

1 голос
/ 19 ноября 2008

Определенное количество взломов, чтобы заставить его работать в IE6, потому что width: auto никогда не работал должным образом.

Я видел несколько решений этой проблемы с использованием ширины: 1px; overflow: visible ;, который может сработать в этом случае, но лучше всего сделать это в условном комментарии, чтобы не запутаться в «настоящих» браузерах, или использовать хакерский код или подобное. Имейте в виду, что IE 6, вероятно, будет обрабатывать это по-разному в режиме совместимости со стандартным режимом, поэтому знайте свой тип документа.

Кстати, ваши теги привязки будут помещены в блок, чтобы вы получали цели мыши одинаковой ширины.

1 голос
/ 19 ноября 2008

Чтобы получить сжатие li внутри ul с чистым CSS, но с неравной шириной, попробуйте: 

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}

(тогда возможно адаптировать искусственные столбцы с фиксированной высотой строки и повторяющимся фоновым изображением для стилизации элементов li )

Если вы уверены, что это только для IE, тогда JavaScript может быть встроен в CSS с динамическим свойством , чтобы установить ширину дочернего элемента для соответствия родитель таким образом: 

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}
1 голос
/ 19 ноября 2008

Ваш единственный вариант - JavaScript.

Кстати, один из моих сайтов посещают большое количество домашних пользователей. Мы видели, что IE6 сокращает до 12% нашего трафика. Два месяца назад это было 20%. Это в то время как общий трафик IE остается на 76%

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

...