Элемент IE7 для расширения на основе дочерних элементов

Question

Я работаю с вертикально выровненными элементами в списке, который должен работать в IE7. Я ссылаюсь на код на этой странице, который, кажется, хорошо работает в разных браузерах.

Я столкнулся с проблемой в IE7, когда первый элемент списка не расширяется, чтобы соответствовать ширине элементов внутри него. Ниже ссылка на мой код.

http://jsfiddle.net/grimmus/jUFMJ/

      <ul>
      <li>
          <div class="outerContainer">
              <div class="innerContainer">
                  <div class="element">
                    <a href="#">
                        To Verify
                    </a>
                  </div>
              </div>
          </div>
          <div class="outerNumber">
              <div class="innerNumber">
                  <div class="element">
                    <a href="#">
                        3903
                    </a>
                  </div>
              </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">To Authorize</a></div>
          </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">View Payments</</a></div>
          </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">To Submit/Modify</a></div>
          </div>
          </div>
      </li>  
  </ul>

Элементы в списке будут динамическими, поэтому на самом деле невозможно назначить конкретную ширину для каждой LI.

Кто-нибудь знает, как я могу расширить элемент списка, чтобы он соответствовал дочерним элементам без определенной ширины?

Answer 1

Ну, у вас есть целый стек специфичных для IE7 хаков (т.е. * хаки), но если честно, некоторые из них делают вещи хуже, а не лучше.

В IE7 есть некоторые проблемы с CSS, и иногда CSS-хаки оправданы, но я не думаю, что то, что вы здесь делаете, действительно помогает.

Я смог заставить вещи работать намного лучше, просто отключив несколько бит взломанного кода CSS.

Например, .items li .outerContainer .innerContainer .element a определяет position:absolute, но только для IE7. Это полностью меняет расположение элемента и, конечно, идет не так.

А также .items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element определяет top:-50%, Это то, что выталкивает большую часть вашего контента из верхней части их ящиков. Если я отключу это, контент снова появится в поле зрения. Не совсем в нужном месте, но видимый и удобный.

Итак, первое, что я бы посоветовал вам сделать, это удалить все ваши текущие IE7-хаки. Они ломают вещи, а не делают их лучше.

Удаление этих хаков сделает ваше меню пригодным для использования в IE7. Это не будет выглядеть идеально, но это будет полезно. И лично я бы оставил это на этом. Вы говорите, что вам нужен сайт для работы в IE7; это будет работать. Это может выглядеть не так красиво, как в других браузерах, но это будет работать.

Если вам действительно нужно сделать его идеальным по пикселям в IE7, то да, вам может понадобиться несколько взломов IE7. Хотя они и отличаются от тех, которые вы уже пробовали! Вы должны быть немного более тонкими с ними. Может быть, просто поправив padding-top на .element или что-то подобное, чтобы переместить текст вниз в более центральное положение.

Надеюсь, это поможет.

[РЕДАКТИРОВАТЬ] Дальнейшие мысли о том, как решить проблему...

Вы упоминаете, что padding-top сложно, потому что некоторые элементы идут через две строки. Это действительно затруднит точную прокладку всех элементов с использованием единого стиля. Если вы заранее знаете, какие из них будут длиннее, вы могли бы дать им другой отступ, но я понимаю, что это может быть проблематично.

Другой угол, который вы могли бы взять, это Javascript. Небольшой кусочек javascript, специально предназначенный для решения этой проблемы только для IE7, будет довольно простым, и он не будет оказывать никакого влияния на другие браузеры.

Вы также можете использовать библиотеку JS polyfill, например ie9.js или http://selectivizr.com/, которая пытается исправить некоторые проблемы с CSS и отсутствующие функции в старых версиях IE.