0
我在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;
}
}