html - 显示 : table and overflow: hidden in Firefox and IE 的不正确行为

Question

我将使用这样的标记:http://jsfiddle.net/g6fo2grs/

因此，主要问题出在第二个 div 中包含的绝对定位伪元素“before”中。如果它大于容器，我正在使用 overflow: hidden 来隐藏它，我在 Firefox 和 IE 上遇到问题，因为这种样式不适用于 display: table 样式.我应该使用它，因为第二个 div 可以包含不同数量的不同大小的内部 div，并且它们应该被拉伸(stretch)到第二个 div 的宽度。这就是为什么我使用 display: table-cell 但如果没有 display: table 作为三分之一的 div，它就无法工作。而且我要支持IE8+所以不能用flex。最后，我无法向该标记添加新元素，也无法用 div 替换伪元素。

Answer 1

clip 属性不能解决您的问题，因为“表格”具有固定大小吗？

.second:before {
    /*
    all other styles unchanged
    */
    clip: rect(25px 552px 77px 50px);
}

参见示例:http://jsfiddle.net/g6fo2grs/4/

顺便说一下，您在示例中使用的一些功能(例如 rgba() color 和 border-radius)已经与 IE8 不兼容。