Пользовательский стиль Wordpress - больше ссылок, непоследовательно отображаемых между webkit и firefox - PullRequest
0 голосов
/ 14 сентября 2010

Итак, я стилизую ссылку 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">&raquo;</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

Ответы [ 3 ]

1 голос
/ 15 сентября 2010

Просто переместите span в начало ссылки.Также это может помочь решить почти ту же проблему в ie7.

<p>

    <a href="http://link" class="more-link">

        <span class="arrow">&raquo;</span>

        Read the rest of this entry 

    </a>

</p>
0 голосов
/ 15 сентября 2010

Это также можно было бы сделать, сделав часть стрелки фоновым изображением на ссылке. Меньше кода, меньше хлопот и никаких мелочей.

0 голосов
/ 15 сентября 2010

Решили просто изменить стиль стрелки пролета с плавающего вправо на абсолютно позиционированный и дали анкеру дополнительное правое отступление для компенсации. Кажется, это сработало очень хорошо.

...