CSS до и после вертикального выравнивания сверху

Question

У меня есть простой слайдер, в котором я делаю две стрелки на обоих концах. Однако выравнивание стрелок на обоих концах отключено на один пиксель. Он ниже или выше как в Firefox, так и в Chrome на один пиксель. Я создаю стрелки в CSS. Я использую OSX 10 Mountain Lion, а не Windows.

Я настроил кодовую ручку здесь: 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;
}

если вы не хотите использовать символы.