垂直對齊：在IE8中的中間（在IE7/FF /鉻）

我有一個簡單的固定寬度表。第一列有一個流體寬度幷包含一些簡單的文本。其他列是固定的寬度，幷包含一個帶有一些更簡單文本的填充div。表中的所有元素都設置爲vertical-align：middle。在IE7 +，FF，Chrome等中，一切都垂直對齊。垂直對齊：在IE8中的中間（在IE7/FF /鉻）

然後我添加了一些JS來切換固定寬度列的顯示。在FF，Chrome甚至IE7中，所有東西都保持垂直對齊，但由於某些原因，IE8變得棘手。

下面是一個演示：http://www.pinksy.co.uk/table.html

爲了證明：

切換列4列5將被垂直排列的，如果它仍然是舊的行高度。
切換第3列。然後第4列和第5列將垂直對齊，就好像它仍然是舊的行高。
切換第2列。第3,4和5列然後將垂直對齊，就好像它仍然是舊的行高。

因此，這與IE8無法重新計算其餘最右列相對於新行高的垂直對齊有關。

瘋狂的事情是，在IE7中很好！任何想法非常感謝！

來源

2012-02-16 pinksy

IE8。瀏覽器世界的肯德基大腦。很奇怪它在IE7中工作，但不是IE8。也許嘗試將你的文檔類型改爲Strict，或者使用'<！DOCTYPE html>'？ – Bojangles 2012-02-17 03:15:23

不錯的想法，但也沒有工作，可悲的是：/ – pinksy 2012-02-17 09:29:46

我的IE8在兼容性視圖模式下運行。當我切換到正常模式時，我可以複製您的問題。我爲數字添加了一個嵌套表，並修復了它...

<td class="title"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra risus. Quisque sodales libero eget diam tincidunt interdum sollicitudin nunc porttitor. Donec bibendum ultrices purus sit amet viverra. Sed in libero quis tellus vehicula mattis sit amet vitae turpis. 
</td> 
<td> 
    <table> 
    <tr> 
     <td class="num1"> 
      <div class="val">Num1</div> 
     </td> 
     <td class="num2"> 
      <div class="val">Num2</div> 
     </td> 
     <td class="num3"> 
      <div class="val">Num3</div> 
     </td> 
     <td class="num4"> 
      <div class="val">Num4</div> 
     </td> 
     <td class="num5"> 
      <div class="val">Num5</div> 
     </td>       
    </tr> 
    </table> 
</td>

來源

2012-02-16 22:52:48 neo108

完成，請參閱http://www.pinksy.co.uk/table2.html，但IE8仍然有同樣的問題 – pinksy 2012-02-16 23:35:51

嗯......我跑了它本地在IE8上的Apache服務器上，它工作正常。您可以嘗試以下方法... 1）將.num元素的寬度更改爲10％而不是40px。 2）不確定是否要這樣做，但可以將寬度設置爲**。title ** CSS元素。我已經嘗試了兩種選擇，他們工作正常。 – neo108 2012-02-17 00:46:41

@pinksy我的IE8在兼容性視圖模式下運行。請參閱編輯的回覆。 – neo108 2012-02-17 03:10:56

垂直對齊：在IE8中的中間（在IE7/FF /鉻）

回答

相關問題