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供您参考。