2

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

.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，并切断该元素位于其外部的任何子元素（通过绝对定位或诸如此类）。如何以显示这些元素的方式重置剪辑？

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

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

2 回答 2

3

只需给它一个比必要的更大的 IE8 剪辑。这也适用于所有其他浏览器，因此您不需要任何特定于浏览器的 hack（尽管您可能还希望包含更新的逗号分隔语法 for rect()，它不受 IE7 支持，但实际上是有效的 CSS 不像非逗号分隔的语法）：

.accessible-show-absolute {
  clip: rect(-9999px 9999px 9999px -9999px);
}
于 2013-10-30T18:47:13.627 回答
1

剪辑：继承

只要父容器没有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;
}
于 2015-02-19T15:11:17.107 回答