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

Question

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

Я испытываю проблему в 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, например ie9.js или Selectivizr, которые пытаются исправить некоторые проблемы с CSS и отсутствующие функции в более старых версиях IE.