逗号分隔的跨度与纯CSS

无论差距在哪里(如果有的话),我怎么能调整它才能始终正确渲染？我只需要支持现代浏览器(IE9 +等).

我颠倒了逻辑,将逗号作为before伪元素的内容

示例:http://codepen.io/anon/pen/NPdbbw

/* remove extra space before the comma */
.comma:not(:first-child) {
  margin-left: -.3em;  
}

/* no need to display empty elements */
.comma:empty {
  display: none;
}

.comma:not(:first-child):before {
  content: ", ";
}

如果第一个.comma元素也可以为空,那么这是一个更复杂的方法

http://codepen.io/anon/pen/BypQRd

.comma:not(:first-child) {
  margin-left: -.3em;  
}

/* next 2 rules are for spacing when the first .comma is empty too */
.comma:first-child:empty ~ .comma:not(:empty) {
  margin-left: 0;  
}

.comma:first-child:empty ~ .comma:not(:empty) ~ .comma:not(:empty) {
  margin-left: -.3em;  
}

.comma:empty {
  display: none;
}

.comma:not(:first-child):before {
  content: ", ";
}

.comma:not(:first-child):before {
  content: ", ";
}

.comma:empty + .comma:not(:empty):before {
  content : "";
}

.comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before {
  content : ", ";
}

最后一个示例已经成功地针对4个元素的所有可能组合进行了测试

:empty有关MDN上可用的伪类的更多信息