诡异！请问利用li制作间隔线，统一设置1px宽度，为什么显示粗细不一样呢？

<title>Document</title>

<style>

li {

list-style: none;

float: left;

}

li {

margin: 9px 20px;

width: 1px;

height: 100px;

background-color: #c81623;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

这个可能是物理像素问题，在一个10*10像素的屏幕中，一共有一百个像素点，1像素宽的一条线出现的可能有很多种，比如我拿出两个像素，把这条线画在两个像素中间，也就是每一个像素各占了一半，组成了一像素，这时系统会自动向两边渲染，将这两个像素全部渲染出来，系统在这样的条件下多渲染出来的一像素在颜色上会与原像素颜色有一个模糊差别，你可以用canvas试一下，放大这个差别。

你放大或缩小页面就会发现这个是分辨率的问题

电脑分辨率的问题

有点意思，还挺对称，页面开F12看看具体样式吧，应该能排查到

考虑一下margin塌陷以及margin合并的问题

浏览器的问题，可以用边框写，用c3盒子模型（box-sizing: border-box;）
width: 1px;
height: 12px;
border-right: 1px solid #666;