Question

我正在使用裁剪技术为有视力的用户隐藏内容，但可供屏幕阅读器使用。它看起来像这样：

.accessible-hide {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
}

当我想再次显示该项目时，我可以根据其原始定位给出其中一个类：

.accessible-show-static {
  /* No need to reset clip if we're resetting the position to static. */
  position: static;
}

.accessible-show-relative {
  /* Ditto for relative positioning. */
  position: relative;
}

.accessible-show-absolute {
  /* If the shown element should have absolute positioning, reset clipping. */
  clip: auto;
}

这在大多数浏览器中都很有用，但当然在Internet Explorer 8中存在问题！对于第二个类.accessible-show-absolute，通过clip重置clip: auto属性仍会剪切到元素的框中，并切断位于其外部的该元素的所有子元素（通过绝对定位或诸如此类的东西）。如何以显示这些元素的方式重置剪辑？

（注意：我意识到一个更整洁的解决方案是简单地通过JavaScript删除.accessible-hide类，但有时您需要在CSS中执行此操作 - 例如，悬停或焦点状态:)

.submenu {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
}
.menu-item:hover .submenu {
    clip: auto;
    top: 100%;
    left: 0;
}

Answer 1

为IE8提供一个比必要的更大的剪辑。这也适用于所有其他浏览器，因此您不需要任何特定于浏览器的黑客攻击（尽管您可能还希望包含rect()的较新的逗号分隔语法，IE7不支持该语法，但是实际上有效的CSS与非逗号分隔的语法不同）：

.accessible-show-absolute {
  clip: rect(-9999px 9999px 9999px -9999px);
}

Answer 2

剪辑：继承

只要父容器没有设置clip，您就可以使用clip: inherit删除IE8中的剪贴蒙版，以替代clip: auto。

在您的第一个示例中：

.accessible-hide {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
}

.accessible-show-absolute {
    /* If the shown element should have absolute positioning, reset clipping. */
    clip: inherit;
}

在您的第二个示例中：

.submenu {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
}
.menu-item:hover .submenu {
    clip: inherit;
    top: 100%;
    left: 0;
}

在IE8中，通过`clip：auto`重置剪辑会切断位于元素外部的子节点

2 个答案:

剪辑：继承