基於子元素擴展的IE7元素

我正在處理需要在IE7中工作的列表中垂直對齊的項目。我一直在參考this頁面上的代碼，這似乎很適合跨瀏覽器。基於子元素擴展的IE7元素

我在IE7中遇到了一個問題，第一個列表項沒有擴展到適合其內部元素的寬度。以下是我的代碼的鏈接。所以它不是真的有可能分配一個特定的寬度每個L1

 <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>

在列表中的項目將是動態的。

是否有人知道一種方法，我可以使列表項擴展到適合沒有特定寬度的子元素？

來源

2013-06-12 grimmus

爲什麼你有兩個不同的？ – lifetimes

對不起，現在應該改正。實際上，JSFiddle似乎正在添加html標記... – grimmus

你能發佈你的完整代碼嗎？我無法在工作中訪問JSfiddle ......但在光明的一面，我們仍然在IE7上運行。所以我會通過並修復它爲耶。 – ProfileTwist

那麼，你有一堆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或類似的東西，文本下移到一個更中心的位置。

希望有所幫助。

[EDITS]就如何解決該問題的進一步的想法...

你提到padding-top是棘手，因爲一些元素去了兩行。這將確實很難準確地使用單一樣式填充所有元素。如果你事先知道哪些會更長，你可以給別人一個不同的填充，但我意識到這可能是有問題的。

你可以採取的另一個角度是Javascript。爲IE7專門解決這個問題的一小部分JavaScript實現起來相當簡單，並且不需要對其他瀏覽器產生任何影響。

你也可以考慮使用一個JS填充庫，如ie9.js或Selectivizr，它試圖解決一些舊版本IE中的CSS問題和缺少的功能。

來源

2013-06-12 19:53:30 Spudley

謝謝你的出色答覆Spudley。黑客是因爲試圖讓垂直對齊工作跨瀏覽器。我在文章中提到的鏈接提供了這個解決方案，這是我見過的最強大的一個，可以在IE7中使用。由於文本是動態的，因此很難指定一個可用於1或2行文本的填充頂部值。 – grimmus

@grimmus：沒問題。希望它有幫助。我可以斷言的一件事是，你已經無法工作的黑客。我會發表更多的想法來回答如何解決這個問題。 – Spudley

基於子元素擴展的IE7元素

回答

相關問題