溢出css属性浏览器解释差异

I was just skinning a website and found that overflow:visible renders two completely different things from Firefox to IE.

我只是剥了一个网站,发现溢出:可见从Firefox到IE呈现两个完全不同的东西。

Firefox just displays everything outside of the container... like this:

Firefox只显示容器外的所有内容......如下所示:

 --------------------------------
 | div style="overflow:visible" |
 --------------------------------
  //overflow content from the div above

But IE expands the container to fit the overflow... like this:

但IE扩展容器以适应溢出...像这样:

 -----------------------------------------
 | div style="overflow:visible"          |
 | //overflow content from the div above |
 -----------------------------------------

Anyone know why IE displays it differently and how to get them both to render the same way Firefox is?

任何人都知道为什么IE以不同的方式显示它以及如何让它们以与Firefox相同的方式呈现?

Thanks,
Matt

1 个解决方案

#1

You haven't said so but I'm going to assume you've applied a fixed height here, as I can't think of any other way to get this effect.

你没有这么说,但我会假设你在这里应用了一个固定的高度,因为我无法想到任何其他方式来达到这个效果。

The problem here isn't overflow, it's height. IE unfortunately treats height as minimum height, so it expands the textbox if you've let it (with overflow:visible for example).

这里的问题不是溢出,而是高度。不幸的是,IE将高度视为最小高度,因此如果您允许它,它会扩展文本框(例如,溢出:可见)。

Getting the IE effect in firefox is trivial - you can just apply min-height instead of height, but I don't believe there's a way to directly reproduce the Firefox effect in IE: it's just not that flexible. However, I can conceive of a way of cheating the effect if it's purely graphical by using a background image with repeat-x only to draw a line where you might want it. Failing that you're probably looking at inserting extra mark-up, never good.

在Firefox中获取IE效果是微不足道的 - 你可以只应用min-height而不是height,但我不相信有一种方法可以直接在IE中重现Firefox效果:它不是那么灵活。但是,我可以设想一种欺骗效果的方法,如果它是纯粹的图形,通过使用带有repeat-x的背景图像来绘制你可能想要它的线。如果你没有考虑插入额外的标记,那就永远不会好。

#1