跨度定位IE和一些CSS的未知問題

嗯，我有兩個按鈕，每個圖像在一個範圍內，一個應該放在另一個的頂部，最下面的一個放在一些文本的頂部，並且所有這些一個大的形象的權利。但在Internet Explorer中，圖像和文本不堆疊。跨度定位IE和一些CSS的未知問題

Internet Explorer中： http://i.stack.imgur.com/cENPC.png

這是當前的代碼：

<span class="block"> 
     <img src="images/application.png" alt="Screenshot" width="569px" height="285px"> 
    </span> 
    <span class="block"> 
     <a href="portable"><span id="button_portable"></span></a><br> 
     <a href="installer"><span id="button_installer"></span></a><br> 
     <a href="http://download.microsoft.com/download/1/B/E/1BE39E79-7E39-46A3-96FF-047F95396215/dotNetFx40_Full_setup.exe"><span style="font-size:1em">(Requires .NET framework 4.0)</span></a><br><br> 
     <a href="/changelog.php"><span style="font-size:1.3em">Changelog</span></a> 
    </span>

和CSS：

span.block { 
     display: inline-block; 
     padding: 20px; 
     vertical-align: middle; 
    } 
    span[id="button_portable"], span[id="button_installer"] { 
     background: url("images/download.png") no-repeat scroll 0 0 transparent; 
     float: left; 
     height: 70px; 
     margin-bottom: 10px; 
     width: 250px; 
    } 
    span#button_installer { 
     background-position: 0 0; 
    } 
    span#button_installer:hover { 
     background-position: 0 -71px; 
    } 
    span#button_portable { 
     background-position: 0 -142px; 
    } 
    span#button_portable:hover { 
     background-position: 0 -213px; 
    }

我已經看過了塞弗ral變化，並嘗試所有，但他們都沒有似乎工作。

來源

2011-06-25 David

考慮使用CSS重置是否太晚了？ – bevacqua

儘管我從未使用過，但完全沒有。 – David

替換float: left;與display: inline-block;。

參見demo fiddle。

在IE7，IE8，IE9，Chrome 12，FF 4上的Win7上測試。

來源

2011-06-25 15:03:45 NGLN

非常感謝！ – David

Eric Meyer's CSS Reset通常被認爲是那裏最好的CSS重置。

CSS重置的目的是提供一個「起點」，以便所有瀏覽器都以相同的默認值開始。這使頁面在不同瀏覽器中顯示類似，而不需要針對每個瀏覽器或特定的CSS「bug」或特定的IE瀏覽器版本與每個其他瀏覽器之間的特定黑客攻擊

來源

2011-06-25 14:00:03 bevacqua

所以我只是把它放在我目前的CSS之上？ – David

是的，通常你會把它放在你的母版頁，或者你正在使用的任何東西，但它必須是第一條規則。 – bevacqua

它仍然不合適。 :( – David

跨度定位IE和一些CSS的未知問題

回答

相關問題