背景部分沒有被僞元素覆蓋

我在IE（11）和Edge（25）中出現了一個奇怪的行爲，其中一行顯示在div中的僞元素（之前和之後）之上。在左邊的是什麼是應該看起來像（在Chrome和Firefox這樣做），在右邊你有IE與邊緣：背景部分沒有被僞元素覆蓋

注：這僅發生在「不完全」決議。因此，任何寬度超過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; 
    } 
}

來源

2016-12-27 EngJon

畢竟，我發現這個錯誤行爲的最佳解決方案是一個小「解決方法」：

擺脫overflow: hidden類halfcolumn和hchlwrapper
「：之前的」雙組分：高度101％，上到-1％，做類似的變化「：後」 - 元素

這樣，我不得不放棄增加隱藏溢出的舒適度，但現在看起來不錯。

來源

2017-01-10 10:57:22 EngJon

背景部分沒有被僞元素覆蓋

回答

相關問題