Css li меню динамической ширины строки в IE6
У меня есть такое меню 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
Ваш единственный вариант - javascript.
Кстати, один из моих сайтов посещает большое количество домашних пользователей. Мы видели, что IE6 сокращает до 12% нашего трафика. Два месяца назад было 20%. При этом общий трафик IE остается на уровне 76%.
Я хочу сказать, что вам, вероятно, больше не стоит слишком беспокоиться о причудах IE6.
@ola: Рентабельность инвестиций на то время, чтобы выяснить, как исправить действительно незначительную причуду отображения для 12% (и падающих) ваших пользователей, чрезвычайно низка. Гораздо лучше потратить время на добавление функций или исправление более серьезных проблем.
Прошло почти два года, и использование IE6 упало до 2,71% - когда оно упадет ниже 1%, возможно, мы наконец сможем двигаться дальше ...
@Ola Tuvesson: У нас он упал до 1,74%. ;) Итого: IE 64% (большинство из которых на 8 и 9), Firefox 13%, Safari 13% и Chrome 7,5%. Охватывает около 60 000 домашних пользователей.
Определенное количество взломов, чтобы заставить его работать в IE6, потому что width: auto никогда не работал должным образом.
Я видел некоторые решения этой проблемы с использованием width: 1px; overflow: visible;, который может сработать в этом случае, но лучше всего сделать это в условном комментарии, чтобы не загромождать "настоящие" браузеры, или использовать хакерский хакер или что-то подобное. Имейте в виду, что IE 6, вероятно, будет обрабатывать это иначе в режиме совместимости и в стандартном режиме, поэтому знайте свой тип документа.
Кстати, ваши якорные теги будут помещены в виде блоков, поэтому вы получите цели мыши с одинаковой шириной.
Чтобы сжать Ли внутри ул с чистым CSS, но с неравномерной шириной, попробуйте:
ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}
(затем, возможно, адаптируйте искусственные колонны с фиксированной высотой строки и повторяющимся фоновым изображением для стилизации элементов Ли)
Если вы Конечно, это только для IE, тогда JavaScript может быть встроен в CSS с динамическое свойство, чтобы установить ширину дочернего элемента в соответствии с родительским, таким образом:
ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}
Это удивительно просто:
<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>
Уловка здесь заключается в комбинации плавающего <ul> и добавления пробела: nowrap; к заблокированным анкерам. Фактически, вам даже не нужен «nowrap», если только ваш <ul> не борется за место. Что касается предложения игнорировать 12% посетителей ... ну ...
Голосуйте "за" за ваш код, "против" за высокомерное заявление: «Это замечательно просто».
Единственным высокомерным заявлением в этой ветке было предположение, что 12% пользователей почему-то не в счет. Ленивый и высокомерный. И да, решение на удивление простое. Спасибо за ваш (не) голос!
Сэр, вы гений, придумав такое простое решение. Это устранило проблему, с которой я столкнулся, когда IE6 сообщал, что неупорядоченный список (и, следовательно, все его родительские элементы) был намного уже до того, как он был показан пользователю, чем после. [... и простота не обязательно означает, что это было легко]
Я бы не советовал использовать JS для решения этой проблемы, хотя это, конечно, вариант. Существуют гораздо более простые решения только на CSS. И я боюсь, что время, когда можно перестать беспокоиться о причудах IE6, еще не настало; 12% посетителей - это слишком много, чтобы игнорировать!