垂直对齐：在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 /铬）

回答

相关问题