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形式
如下图，兼容谷歌和火狐
谷歌
火狐