“溢出：隐藏”，“内联块”和“垂直对齐”的垂直对齐问题答案

【问题标题】：Vertical alignment problem with "overflow: hidden", "inline-block" and "vertical-align"“溢出：隐藏”，“内联块”和“垂直对齐”的垂直对齐问题
【发布时间】：2011-06-09 09:18:05
【问题描述】：

这是一个两部分的问题。为 Firefox 解决它会破坏 IE6，为 IE6 解决它会破坏 Firefox。 WebKit 工作正常。

这说明了 Firefox 中的问题：http://jsfiddle.net/UpZca/2/

“导入提交”链接略高于“导出提交”，这是一个问题。此时 IE6 工作正常 - 对齐正确。

我知道当使用'inline-block'时，垂直对齐问题可以通过vertical-align:top来解决，所以我先尝试了。您可以看到它修复了 Firefox 中的问题：http://jsfiddle.net/UpZca/1/

然而，随着这一变化，IE6 决定将“导入提交”一直向下移动到不可见文件输入的底部。再次查看 IE6 中的最后一个链接，了解我的意思。

顺便说一句，jsfiddle 不会像纯 IE6 那样呈现代码。在上面的链接中，我的文本被文件输入中的灰色浏览按钮覆盖。在纯 IE6 中不会发生这种情况，但这仍然表明定位问题。

那么，我有什么办法可以让这段代码在 IE6 和 Firefox 中运行？

任何想法都将不胜感激（关于不使用 IE6 的想法除外 :)）

【问题讨论】：

标签： internet-explorer-6 overflow vertical-alignment css

【解决方案1】：

如果浏览器不是 IE，我最终使用 Javascript 以编程方式添加 vertical-align: top 样式。

【讨论】：

【解决方案2】：

简单的观察告诉我问题可能是因为 IE6 不支持 inline-block。每当您使用 inline-block 时，您还需要这样做：

*显示：内联； *缩放：内联；

这两行相当于 display: inline-block for IE 6 和 7。

有了这个集合，你就可以通过在第一个锚标签或 qq-upload_button 上添加 vertical-align: top 来找出一个跨浏览器的解决方案。

【讨论】：