CSSの枠線の表示に問題があり、ChromeとSafariで同じ機能が動作しない

Question

divには破線の枠があり、その枠線はChromeでは9行（ダッシュ）、Safariでは5行（ダッシュ）として表示されます。ここにそのCSSがあります。

.dashedLines:after { 
 
     content: ''; 
 
     display: block; 
 
     border-bottom: 4px dashed #b7b2b3; 
 
     position: absolute; 
 
     left: 50%; 
 
     top: 84px; 
 
     width: 108px; 
 
     margin-left: -45px; 
 
    }

<div class="dashedLines"> 
 
    <figure class="icon"> 
 
    <i> 
 
    <img src="{{imgs.icon_left}}" alt="Icon pencil black " /> 
 
    </i> 
 
    </figure> 
 
    <figure class="icon"> 
 
    <i> <img src="{{imgs.icon_right}}" alt="Icon descktop black " /> </i> 
 
    </figure> 
 
    </div>

それはSafariでこのように動作します：私はとSafariで同じ動作するように破線を必要

：

それはChromeでこのように動作しますクロム。

Answer 1

異なるブラウザで同じ行数を取得する場合は、borderプロパティを使用できません。あなたは、他のいくつかのテクニックを使って、望ましい出力を得ることになっています。

あなたのダッシュは水平に、あなたは、コードの下に使用することができますを揃える必要がある場合は、

background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%); 
background-position: bottom; 
background-size: 20px 4px; 
background-repeat: repeat-x; 

あなたのダッシュが垂直方向に揃える必要があるならば、あなたは、コードの下に使用することができ、

background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%); 
background-position: right; 
background-size: 20px 4px; 
background-repeat: repeat-y; 

.dashed-border img { 
 
    background-image: linear-gradient(to right, black 33%, rgba(255, 255, 255, 0) 0%); 
 
    background-position: bottom; 
 
    background-size: 20px 1px; 
 
    background-repeat: repeat-x; 
 
    padding-bottom: 10px; 
 
}

<div class="dashedLines"> 
 
    <figure class="icon"> 
 
    <i> 
 
     <img src="{{imgs.icon_left}}" alt="Icon pencil black " /> 
 
     </i> 
 
    </figure> 
 
    <figure class="icon dashed-border"> 
 
    <i> <img src="{{imgs.icon_right}}" alt="Icon descktop black " /> </i> 
 
    </figure> 
 
</div>

を見つけるあなたの参照のための。