HTML代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>last-child</title>
<style>
body{
color:#333;
}
li.test-last-child:after{
display: block;
content: '';
height: 10px;
background-color: #0000ed;
transform:scaleY(0.3);
}
li.test-last-child:last-child:after{
display: none;
}
</style>
</head>
<body>
<ul>
<li class="test-last-child">321312</li>
<li class="test-last-child">31313</li>
<li class="test-last-child">3131</li>
<li class="test-last-child">1413</li>
<li class="test-last-child">141321</li>
<li class="test-last-child">1421</li>
</ul>
</body>
</html>
偽元素after的高度為10px時chrome效果圖
偽元素after的高度為10px時Firefox效果圖
偽元素after的高度為1px時chrome效果圖
偽元素after的高度為1px時Firefox的效果圖
1、偽元素的高度大於1px時scale可以正常渲染，當高度為1時，scale小於1時火狐瀏覽器不能很好的渲染出來。
2、實際上，當偽元素的高度為1px時，scale在谷歌瀏覽器雖然能正確顯示出來，但是渲染的過程中只是改變了顏色的透明度，並沒有改變高度的大小。
如下圖所示：渲染前
渲染后
而此時，火狐瀏覽器壓根是不渲染的（因為為元素的高度小於1且scale也小於1），所以scale的方式解決小於1px時會存在兼容問題
此時，最好的解決辦法是
當設計稿的像素小於1px時，代碼渲染直接是1px，然后給border-color或者background-color的色值設置為rgba形式
如下圖，兼容谷歌和火狐
谷歌
火狐
