垂直对齐问题"溢出:隐藏","内联块"和" vertical-align"

时间:2011-05-19 00:46:07

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

这是一个两部分问题。为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的想法之外):)

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

简要介绍一下,问题可能是因为IE6不支持内联块。无论何时使用内联块,您还需要执行此操作:

* display:inline; * zoom:inline;

这两行相当于显示:IE 6和7的内联块。

通过这个集合,您可以通过将vertical-align:top添加到第一个锚标记或qq-upload_button来找出针对该问题的跨浏览器解决方案。