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

Posted 2023-03-06

【中文标题】如何阻止 Internet Explorer 的专有渐变过滤器切断应该溢出的内容？

【英文标题】：How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

【发布时间】：2011-02-14 22:59:08

【问题描述】：

我在我的 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 */

【问题讨论】：

一些源代码和一个活生生的例子会很有用:)

没有活生生的例子，我通过将渐变应用到一个额外的绝对定位的 div 来破解一个解决方案，该 div 与我最初想要着色的父 div 具有相同的高度和宽度。我仍然很好奇为什么会出现这个问题，以便我可以修复它并避免将来出现多余的标记。

尝试查看satzansatz.de/cssd/onhavinglayout.html#filter 和链接的satzansatz.de/cssd/tmp/alphatransparency.html - 他们可能（或可能不会）回答您的问题，但IE 的hasLayout 往往在这些类型的问题中发挥核心作用，也许是强制剪辑内容？

这实际上看起来像是值得研究的东西。谢谢大卫。

这是一个例子：jsfiddle.net/thugsb/ZcT8G/2 似乎只发生在 ie7 中，ie6 根本无法渲染渐变。

【参考方案1】：

这可能会帮助那些选择放弃对 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/)。

【讨论】：

+1，因为您的回答帮助我理解了原因，而不仅仅是给出一些针对特定情况的标记。看起来事实证明，任何专有的 MS 过滤器都会裁剪内部定位的元素。谢谢。

希望我至少能给你+25 :) 。在为此修复浪费了 3 个小时之后，终于找到了您的评论。 z-index:auto 为我工作.. 谢谢老兄:)

只有 3 小时？！？我多么羡慕你；）

【参考方案2】：

这可行，虽然它是额外的标记。

<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>

【讨论】：

PS - 额外的文字令人发指，我已经回到图像，现在..希望 chrome 在未来几年内完成 IE。

【参考方案3】：

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

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

不过，我可以推荐一个提示；使用 min- 和 max- 而不是 width 和/或 height。它们允许您灵活调整框大小，并带有引导边界。

【讨论】：

你是对的，第一部分没有回答我的问题。第二点不对。正如您所说，我希望我的内容“走出盒子”，关键是它不会，并且只有在我应用渐变滤镜时才会正确停止溢出。

忽视客户的要求只会降低未来的就业机会。您不愿意帮助互联网的用户尽可能高效和整洁地工作，是因为您不愿意，还是因为您不能，而且比回答我的问题更容易被嘲笑？我不认为这样做比为网站上的每个渐变图像包含额外的 http 请求更糟糕。

【参考方案4】：

我将父 div 的位置设置为相对并且它起作用了 :)（或者绝对，也可以正常工作）