背景部分未被伪元素覆盖

Question

我在 IE (11) 和 Edge (25) 中遇到了一个奇怪的行为，在 div 中的伪元素（之前和之后）的顶部显示了一条线。左边是它应该看起来的样子（在 Chrome 和 Firefox 中也是如此），右边是 IE 和 Edge：

注意：这只发生在“非完整”分辨率上。因此，任何大于 1300 像素的分辨率都不包含该边框。

编辑：我将其缩小到转换。这条线只出现在一个倾斜的元素中。

我有以下html结构：

<div class="col-xs-12 col-md-3 rightcontent">
    <div class="halfcolumn hcblue">
        <div class="hchlwrapper">
            <div class="hcheadline">NEWS</div>
        </div>
        ...
    </div>
</div>

样式如下（scss）：

/* Colors */
$red: #FF0000;
$green: #00FF22;
$yellow: #FFF700;
$black: #000000;
$blackrgba: rgba(0,0,0,0.5);
$grey: #D7D7D7;
$greydark: #808080;
$lightgrey:#EcEBEB;
$white: #FFFFFF;
$bluelight: #6882B5;
$darkblue: #003399;
$ikbblue: #003399;
$ikbgreen: #B2D84C;

/* Heights, widths */
$full-width: 1300px;
$large-width: 1200px;
$desktop-width: 992px;
$medium-width: 768px;
$small-width: 576px;
$min-width: 320px;
.halfcolumn{

        padding-right: 25px;
        padding-bottom: 25px;
        overflow: hidden;


        .hcheadline{
            font-weight: bold;
            text-align: center;
            padding: 15px 0 15px 0px;
            color: $ikbgreen;
            overflow: hidden;

            @media (min-width: $full-width){
                font-size: 30px;
                margin-right: 40px;
            }
            @media (min-width: $large-width) and (max-width: 1299px){
                font-size: 30px;
                margin-right: 20px;
            }
            @media (min-width: $desktop-width) and (max-width: 1199px){
                font-size: 22px;
                margin-right: 20px;
            }
            @media (min-width: $medium-width) and (max-width: 991px){
                font-size: 15px;
                margin-right: 8px;
            }
            @media (min-width: 468px) and (max-width: 767px){
                font-size: 22px;
                margin-right: 130px;
            }
            @media (min-width: 380px) and (max-width: 467px){
                font-size: 14px;
                margin-right: 90px;
            }
            @media (max-width: 379px){
                font-size: 14px;
                margin-right: 60px;
            }
        }

        .hchlwrapper{
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .hchlwrapper:before{
            content: '';
            position: absolute;
            background-color: $white;
            width: 100%;
            height: 100%;
            left: -10%;
            top: 0px;
            -webkit-transform: skew(-20deg,0deg);
            -moz-transform: skew(-20deg,0deg);
            transform: skew(-20deg,0deg);
            z-index: -1;
            @media (min-width: $desktop-width) and (max-width: 1199px){
                left: -11%;
            }
            @media (min-width: $medium-width) and (max-width: 991px){
                left: -13%;
            }
            @media (min-width: 468px) and (max-width: 767px){
                left: -7%;
            }
            @media (min-width: 370px) and (max-width: 467px){
                left: -8%;
            }
            @media (max-width: 369px){
                left: -9%;
            }
        }
        .hchlwrapper:after{
            content: '';
            position: absolute;
            background-color: $white;
            left: 88%;
            width: 9%;
            height: 35%;
            top: 0%;
            z-index: -1;
            -webkit-transform: skew(-20deg,0deg);
            -moz-transform: skew(-20deg,0deg);
            transform: skew(-20deg,0deg);
        }

        .hccontent{
            padding-left: 25px;
        }

    }

    .hcblue{
        background-color: $ikbblue;
        color: $white;
    }
    .hcgreen{
        background-color: $ikbgreen;
        color: $white;
    }
    .hcgray{
        background-color: $greydark;
        color: $white;
    }
}

Answer 1

毕竟，我为这种错误行为找到的最佳解决方案是一点“解决方法”：

• 去掉overflow: hidden类中的halfcolumn和hchlwrapper
• 在“:before”部分：高度为101%，顶部为-1%，对“:after”元素进行类似的更改

这样一来，我不得不放弃隐藏溢出的舒适，但现在看起来很好。