A полностью рабочий пример доступен здесь на jsFiddle .Я настоятельно рекомендую вам посмотреть здесь, поскольку CSS довольно большой, и я не хотел вставлять его сюда (что затрудняет чтение моего вопроса).
У меня горизонтальноцентрированная вкладка на моем сайте, идея в том, что элементы UL / LI центрированы на странице, и у меня есть решение, которое до недавнего времени (казалось) работало на всех конфигурациях браузера.
HTML для этогона самом деле довольно просто:
<div id="tabContainer">
<ul>
<li style="width: 190px;"><span><a href="#">Tab One with more text</a></span></li>
<li style="width: 190px;"><span><a href="#">Tab Two</a></span></li>
<li style="width: 190px;"><span><a href="#">Tab Three is wide</a></span></li>
</ul>
</div>
- Каждая
<li> является вкладкой, она имеет левый отступ для левого закругленного элемента табуляции. - Каждый
<span> имеет правый отступ для правого закругленного табуляции. - Наконец,
<a>, как правило, заполняет остаток, делая для большой цели клика. - Каждый элемент вручную стилизован с помощью
width: 190px, который поддерживает одинаковую ширину (для хорошего визуального взглядаЭто настраивается кодом сайта, поэтому он имеет вид style против class.
CSS:
- CSSработает с простой концепцией,
<ul> смещен на 50% вправо, а <li> смещен на 50% влево (left: -50%;), чтобы они всегда были в центре главного контейнера. - вкладки немного перекрываются с использованием отрицательного поля и z-индекса, так что угловые части крест-накрест (сделано на фоновом изображении, которое здесь не важно)
Проблема
IE7 решает, что он не будет слушать явное style="width: 190px", даже если к нему добавлено !important, однако, это, кажется, происходит только тогда, когда left: -50% присутствует в элементе <li>.при удалении этого стиля вкладки сдвигаются вправо (неправильное расположение, но правильная фиксированная ширина).
Мне кажется, что это не связано , так как left: -50% ничего не заставит элементы столкнуться, заставив их перейти на минимальную ширину.
Эта установка работает правильнои проверено в:
- IE8
- IE9
- FF3.6
- FF5
- Chrome Stable (v13) *
- Chrome Beta (v14) *
- Safari 3
* По состоянию на 18 июля 2011 г.
Итак, что может бытьвызывая это?Почему это происходит?Как я могу это исправить?Я перепробовал все виды твиков и не могу заставить его подчиняться ширине ...
Изображение, чтобы вы могли ВИДЕТЬ проблему рядом:
Задача http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png