Итак, я стилизую ссылку Wordpress more на странице индекса блога, и я использовал несколько пользовательских стилей и разметки, которые непоследовательно отображаются в браузерах на основе webkit (Safari и Chrome) и Firefox. В Firefox все хорошо, но в webkit это выглядит не так, как мне бы хотелось. Я не могу найти, как это исправить в webkit.
Проблема в том, что у меня есть стиль текста ссылки, а затем концевая часть обернута в промежуток, который я заменяю изображением стрелки, с текстом, плавающим влево, и стрелкой, плавающей вправо. Однако в браузерах webkit диапазон стрелок не соответствует стилю текста.
Разметка выглядит так:
<p>
<a href="http://link" class="more-link">
Read the rest of this entry
<span class="arrow">»</span>
</a>
</p>
И стили выглядят так:
.entry p a.more-link {
display:block;
float:right;
margin:20px 0px 10px;
padding:3px 12px;
background:#6e5e4c;
color:#e6decc;
font-style:italic;
text-decoration:none;
font-weight:bold;
font-size:14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
line-height:20px;
}
.entry p a.more-link:hover {
background:#92d400;
color:#faf7ee;
}
.entry p a.more-link .arrow {
float:right;
display:block;
width:10px;
height:14px;
text-indent:-9999px;
background:url(/img/cure-sprite-main-v2.png) no-repeat -310px -195px;
margin-top:3px;
margin-left:10px;
}
Не стесняйтесь просматривать действительный код также здесь: http://cure.org/blog