Абсолютно позиционируемый элемент, спрыгивающий на: активный - но почему? - PullRequest
Новая
       2

Абсолютно позиционируемый элемент, спрыгивающий на: активный - но почему?

2 голосов
/ 12 августа 2010

У меня есть якорь с куском, завернутым в теги <em>, так что я могу расположить его поверх фонового спрайта привязки, который расположен слева от остальной части текста привязки.

Все хорошо, кроме: активный бит с абсолютным позиционированием спрыгивает примерно на 20 пикселей.

И мне трудно это диагностировать, поскольку вы ограничены проверкой: активные состояния сfirebug, так как вам действительно нужно щелкнуть элемент, чтобы получить: active правила для отображения!

Вот страница http://cure.org/brant и рассматриваемая часть - зеленые кнопки призыва к действию.Если щелкнуть и удерживать (или просто щелкнуть), вы увидите, что HTML-текст на кнопках прыгает вниз, как описано.

К вашему сведению, стили для этой страницы находятся в файле brant.css, а не в main.min.css

Ответы [ 2 ]

2 голосов
/ 12 августа 2010

Хорошо, я нашел это,

у вас есть правило, которое делает это: 

a.active 
{
    position:relative;
}

, которое дает вашим активным кнопкам относительное положение.Добавление статического позиционирования в li.lp-ask-butn-sm a: hover, li.lp-ask-butn-sm a: focus, li.lp-ask-butn-sm a: active в

brant.css

помогает 

li.lp-ask-butn-sm a:hover, li.lp-ask-butn-sm a:focus, li.lp-ask-butn-sm a:active
{
    position:static;
}

Однако мне любопытно, что из-за относительного расположения вызывает смещение вниз.Обновление: согласно Firebug, ссылка и сильный все еще находятся в правильном положении, однако это делается ниже.Это вызывает недоумение.

В любом случае, решение, которое я опубликовал относительно этого параграфа, решает проблему.

1 голос
/ 12 августа 2010

position устанавливается в relative в этом правиле: 

a:active {
    outline:0 none;
    position:relative;
    top:1px;
}

Добавьте position:static к этому правилу, чтобы переопределить поведение a:active: 

li.lp-ask-butn-sm a:hover, li.lp-ask-butn-sm a:focus, li.lp-ask-butn-sm a:active {
    background-position:left -50px;
    color:#2F2511;
    position:static; /* add this */
}
...