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：

它的工作原理是這樣的Chrome：

我需要虛線工作一樣在Safari與鉻。

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>

找到fiddler供您參考。