Как заставить один элемент отображаться одинаково в браузерах?

Question

[Никита Нафранец]

Есть картинка, которая в хроме и опере стоит там где надо, а в ie и firefox криво.
Chrome

Firefox

IE 11

Как ее поставить на место?

Фиолетовый блок я сделал из div и a внутри этого div
Вот код css к нему

.refresh
		background #8c6ff3
		box-shadow: none
		height 100px
		text-indent 100%
		white-space nowrap
		overflow hidden
		cursor pointer
		font-size 0
		transition: background-color 1s;
		a.button:after
			background url('/img/arrow.png') no-repeat center
			display block
			width 36px
			height 42px
			position relative
			margin 25px 0px 0px -25px
			z-index 2
			top 50%
			left 50%
			content ''

Comments

[Дима Паутов]

А как вы ее туда поставили?

[Никита Нафранец]

Дима Турков: обновил вопрос.

Answer 1

[Андрей Козлов]

Без исходника не буду тезраться... Но, может быть, стоит оформлять код по соответствующему синтаксису?

.refresh{
    background: #8c6ff3;
    box-shadow: none;
    height: 100px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    font-size: 0;
    transition: background-color 1s;
}
    a.button::after{
      background: url('/img/arrow.png') no-repeat center;
      display: block;
      width: 36px;
      height :42px;
      position: relative;
      margin :25px 0px 0px -25px;
      z-index: 2;
      top :50%;
      left :50%;
      content: '';
}

Comments

[Никита Нафранец]

Это Stylus.