19

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

4 回答 4

11

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

于 2012-01-27T20:38:09.220 回答
10

这有效，尽管它是额外的标记。

<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>
于 2010-06-12T10:46:49.543 回答
1

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

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

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

于 2010-05-03T08:33:50.213 回答
0

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

于 2012-04-19T12:05:03.420 回答