Перенос изображений внутри вкладки Facebook - PullRequest
Новая
       6

Перенос изображений внутри вкладки Facebook

0 голосов
/ 25 января 2011

Я пытаюсь использовать простой CSS-спрайт для основанных на изображениях ролловеров на странице вкладки Facebook, а фоновые изображения удаляются Facebook.Чтобы было ясно, эта проблема возникает только внутри страницы Tab , но не в самом основном приложении.

Facebook также выглядит очень требовательным, когда он удаляет фоновые изображения - применены фоновые изображения теги привязки удаляются, но фоновые изображения, примененные к элементу списка , содержащему привязку, остаются неизменными.

Например, с учетом разметки: 

<li><a href="http://some/destination.html" target="_top"><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></a></li>

следующий CSS успешно применяет фон к элементу списка: 

li {
    background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}

, но тот же CSS, примененный к дочернему тегу привязки, удаляется Facebook: 

li a {
    background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}

Действительно ли Facebook способен поддерживать основанные на изображениях ролловеры во вкладке, и если да, то как?

1 Ответ

0 голосов
/ 27 января 2011

Обнаружил своего рода решение методом проб и ошибок, хотя оно включает некорректно сложенный html и выглядит довольно неприятно.

Измените разметку так, чтобы div был внутри тега привязки: 

<a href="http://some/destination.html" target="_top"><div><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></div></a>

и примените фоновое изображение к div вместо якоря: 

li a div {
   background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}

Затем можно применить смещение фона следующим образом: 

li a:hover div { background-position: 0 -43px; }

Это работает, но я бы предпочел менее хакерское решение, если кто-нибудь может что-то предложить.

...