Question

我在IE（11）和Edge（25）中得到一个奇怪的行为，其中一行显示在div中的伪元素（之前和之后）之上。左边是它应该是什么样子（在Chrome和Firefox中也是这样），右边是IE和Edge：

注意：这只发生在＆＃34; not full＆＃34;决议。因此，任何宽度超过1300px的分辨率都不包含该边界。

编辑：我把它缩小到变换。该行仅显示偏斜元素。

我有以下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

毕竟，我发现这个有问题的行为的最佳解决方案是一点点＆＃34;解决方法＆＃34;：

在课程overflow: hidden和halfcolumn

hchlwrapper

在＆＃34;：之前＆＃34; -part：高度为101％，最高为-1％，对＆＃34;进行类似的更改：＆＃34; -element

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

伪元素未涵盖的背景部分

1 个答案: