Ширина li с двумя поплавками, различная в IE, правильная в FF - PullRequest
Новая
       10

Ширина li с двумя поплавками, различная в IE, правильная в FF

1 голос
/ 12 апреля 2010

Я обработал большинство изломов с помощью своего эффекта «лавовой лампы», который я пытаюсь создать. По сути, я хочу, чтобы две фигурные скобки (обе являются изображениями) обернули элемент списка, а затем переходили к следующему элементу списка. Я всегда строю в FF, а затем делаю исключения для IE. Я не могу понять, какое исключение мне нужно сделать!

Я использую абсолютно позиционированный li, который содержит два div. Первый div плавает влево, второй всплывает вправо. Ширина li устанавливается равной ширине li, которую предполагается обернуть. Таким образом создается эффект скобок на левой и правой сторонах текста. Он прекрасно работает в Firefox, но у IE есть две проблемы:

  1. Нижняя часть изображений обрезана. Иногда они появляются, когда заканчивается анимация, иногда нет. Я предполагаю, что это связано с высотой, но независимо от того, какой я установил высоту, это не удастся!
  2. Ширина совершенно неправильная.

Вот живой пример этого: http://jsbin.com/odome/2

Левая позиция в IE всегда на 5-7px больше, чем в FF, но это небольшая разница. Меня больше беспокоит ширина и основание обрезаемых изображений.

Спасибо, как всегда, за помощь!

Ответы [ 2 ]

1 голос
/ 12 апреля 2010

Вы должны использовать CSS reset , чтобы списки вели себя в разных браузерах.

0 голосов
/ 13 апреля 2010

1) ваш ul # selection-test неправильно "очищен"

2) не похоже, что вы хотите, чтобы ваш li обернулся, поэтому добавьте пробел: nowrap

3) Мнение: я не знаю, что я чувствую по поводу использования li # blob в качестве лавы в вашей лампе. Если бы это был я, я бы сделал что-то вроде этого 

<div id="menu">
  <ul id="selection-test">
    <li>Menu Item One</li>
    <li>Menu Item Two</li>
    <li>Menu Item Three</li>
  </ul>
  <div id="lava">
    <div id="lava-left"></div>
    <div id="lava-right"></div>
  </div>
</div>
...