带有“溢出:隐藏"，“内联块"的垂直对齐问题被解决.和“垂直对齐"； [英] Vertical alignment problem with "overflow: hidden", "inline-block" and "vertical-align"

问题描述

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

This is a two part problem. Solving it for Firefox breaks IE6, and solving it for IE6 breaks Firefox. WebKit works fine.

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

This demonstrates the problem in Firefox: http://jsfiddle.net/UpZca/2/

导入提交"链接比导出提交"链接略高，这是一个问题. IE6现在可以正常工作-对齐正确.

"Import Submission" link is slightly higher than "Export Submission", which is a problem. IE6 works fine at this point - the alignment is correct.

我知道使用' inline-block '时，可以使用 vertical-align:top 解决垂直对齐问题，因此我首先尝试了该操作.您可以看到它解决了Firefox中的问题: http://jsfiddle.net/UpZca/1/

I know that when using 'inline-block', vertical alignment issues can be fixed with vertical-align:top, so I tried that first. You can see that it fixes the problem in Firefox: http://jsfiddle.net/UpZca/1/

但是，通过此更改，IE6决定将导入提交"一直向下移动到不可见文件输入的底部.再次查看IE6中的最后一个链接，以了解我的意思.

However, with this change IE6 decided that it is going to move "Import Submission" down all the way to the bottom of the invisible file input. Take a look at the last link again in IE6 to see what I mean.

顺便说一句，jsfiddle不能以与纯IE6相同的方式呈现代码.在上面的链接中，文件输入中的灰色浏览"按钮掩盖了我的文字.在纯IE6中不会发生这种情况，但这仍然说明了定位问题.

btw, jsfiddle doesn't render the code the same way as pure IE6 does. In the links above, my text is covered up by the gray Browse button from the file input. In pure IE6 that doesn't happen, but this still demonstrates the positioning problem.

那么，我有什么方法可以使此代码在IE6和Firefox中运行?

So, is there any way for me to make this code work in IE6 and Firefox?

任何想法(不使用IE6的想法除外)将不胜感激

Any ideas would be appreciated (except the one about not using IE6 :))

推荐答案

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

I ended up using Javascript to programatically add the vertical-align: top style if the browser is not IE.

这篇关于带有“溢出:隐藏"，“内联块"的垂直对齐问题被解决.和“垂直对齐"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！