0
divの前後の擬似要素の上に線が表示され、IE(11)とEdge(25)で奇妙な動作が発生します。擬似要素で覆われていない背景部分
注:これは唯一の「フルでない」で発生しますが、IEとエッジを持って右に、左に見えるようになっているものである(とChromeとFirefoxでそう)決議。したがって、1300ピクセルより広い解像度にはその境界線が含まれていません。
編集:私はそれを変換に絞り込んだ。行はスキューされた要素でのみ表示されます。
私は次のHTMLの構造を有する:スタイリングは、以下の(SCSS)です
<div class="col-xs-12 col-md-3 rightcontent">
<div class="halfcolumn hcblue">
<div class="hchlwrapper">
<div class="hcheadline">NEWS</div>
</div>
...
</div>
</div>
:すべての後に
/* 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;
}
}