如何阻止 Internet Explorer 的专有梯度过滤器切断应溢出的内容？

Question

我在 CSS 中使用 Internet Explorer 渐变过滤器。

一切都很顺利，直到我注意到应该超出容器范围的图像 overflow:visible; 被剪裁，就好像容器被设置为 overflow:hidden;

我不知道为什么会发生这种情况，也不知道如何解决它。有人可以帮忙吗？

我在 IE8 和 IE7 中查看它，

这是导致问题的 css，当我将其注释掉时，不再有错误：

.box{
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc')"; /* IE8 */
}

Answer 1

这是可行的，尽管它是额外的标记。

<div id="box_that_wants_a_gradient">
    <div class="gradient_background_1"></div>
    <div class="gradient_background_2"></div>

My content

</div>

这种策略有一个好处，因为您可以添加多个渐变框并将它们的高度/宽度设置为父级的百分比，从而模拟 safari/moz 中允许的“颜色停止”行为。

例如：

<style>

#box_that_wants_a_gradient {
  position:relative;
  display:block;
  height:100px;
  width:100px}

.gradient_background_1 {
  position:absolute;
  height:20%;
  *cbf writing out microsoft filter code*;
  top:0;
  width:100%;
  left:0px}

.gradient_background_2 {
  position:absolute;
  height:80%;
  *still cbf writing out microsoft filter code*;
  top:20%;
  width:100%;
  left:0px}

</style>

Answer 2

我知道这并不能特别回答您的问题，但请考虑一下您的听众。他们只是 Internet Explorer 用户，还是代表了自然的互联网用户比例？如果他们不只是 IE 用户（可能在企业/教育网络中），那么请考虑仅使用符合标准的方法，并允许应用程序/站点正常降级到不支持它的浏览器（例如 IE）。

现在，回答你的问题。它没有按预期工作的原因是该框没有延伸到内容的末尾，即使溢出可见。内容只是“行走”到盒子外面，但这并不会使盒子变大。除非不设置固定的宽度和/或高度属性，否则无法让框扩展以适合内容。事实上，IE 有一个错误，该框没有溢出，而是扩展了（这是一个错误）。

不过我可以推荐一个技巧；使用min-<宽度/高度>和max-<宽度/高度>代替宽度和/或高度< /em>。它们允许您灵活调整盒子大小，并带有引导边界。

Answer 3

我将父 div 的位置设置为相对位置并且它有效:)（或绝对位置，也工作得很好）

Answer 4

这可能会对那些选择放弃 IE7 支持的人有所帮助。

如果元素被定位（相对/绝对/固定），IE7 总是会出现问题。在 IE8+ 中，如果将 z-index 设置为 auto，问题就会消失。

如果您需要支持 IE7，或者需要使用 z-index 堆叠内容，则必须采用第二个包装 DIV。

<div class="position_me_and_stack_me_with_z-index">
  <div class="give_me_a_filter">
    Content goes here
  <div>
</div>

编辑2012-05-29：我创建了一个示例来展示如何解决此问题。我创建了这个示例来解决 z-index 堆叠问题...而且它也恰好解决了这个问题 (http://jsfiddle .net/ryanwheale/gz8v3/）。