css - 垂直对齐顶部之前和之后的css

Question

我有一个简单的滑块，我在其两端制作了两个箭头。然而，两端的箭头对齐偏离了一个像素。在 Firefox 和 chrome 中它要么低要么高一个像素。我在 CSS 中创建箭头。我使用的是 osx 10 山狮，而不是 Windows。

我在这里设置了一个codepen：http: //cdpn.io/mevrI

关于如何让它们对齐到相同的顶部位置的任何想法？

谢谢，巴特

Answer 1

以十六进制格式使用“字母符号”并将它们与行高垂直对齐会容易得多:)

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

.handle {
  width: 110px;
  height: 15px;
  cursor: move;
  position: relative;
  top: 0;
  left: 0;
  margin-left: -1px;
  z-index: 100; 
  background-color:#00718E;
  line-height: 15px;
  font-size:15px;
}

.handle:before {
  content:"\25C0";
  position:absolute;
  top:0;
  left:3px;
  line-height: 15px;
  color:white;
}

.handle:after {
 transparent; 
  content:"\25B6";
  position:absolute;
  top:0;
  right:3px;
  line-height: 15px;
  color:white;
}

除非你不想使用字符。