Теги AMP <a>скрыты от: root CSS - PullRequest
Новая
       20

Теги AMP <a>скрыты от: root CSS

0 голосов
/ 04 января 2019

Я работаю на веб-сайте AMP http://trentontelge.com/. У меня есть ссылки на социальные сети SVG в тегах <a> внизу страницы.Валидатор AMP от Google утверждает, что страница является допустимым кодом, а все остальное отображается правильно, но по какой-то причине AMP генерирует некоторый CSS и добавляет к моему <head> это отображение: ни один не является якорем для моих социальных ссылок.Как мне предотвратить добавление этого?

Вот код для одной из ссылок: 

<a class="social-link" itemprop="sameAs" target="_blank" rel="noreferrer" href="https://github.com/trenton-telge">
    <amp-img layout="responsive" width="1" height="1" alt="GitHub" class="social-button-img" src="./img/social/github.svg" >
        <div fallback>GitHub</div>
    </amp-img>
</a>

и CSS: 

.social-button-img{
        margin: .05in;
        max-height: 15vw;
        max-width: 15vw;
        height: .7in;
        width: .7in;
    }


    /* unvisited link */
    .social-link:link {
        opacity: 1;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

    /* visited link */
    .social-link:visited {
        opacity: 1;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

    /* mouse over link */
    .social-link:hover {
        opacity: .5;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

    /* selected link */
    .social-link:active {
        opacity: 1;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

А вотскрипт, который добавляется в конец моего <head>

<style type="text/css">
    :root [href^="https://www.amazon."][href*="tag="],
    :root .social-link,
    :root img[alt="Facebook"],
    :root img[alt="Google+"],
    :root img[alt="LinkedIn"]
        { display: none !important; }
    :root *[xsscq7p][hidden] { display: none !important; }
</style>

1 Ответ

0 голосов
/ 06 января 2019

Ваша страница выглядит как действующий AMP, и я не могу воспроизвести то, что вы описываете, на моем ПК.

Возможно, самое главное, тег <style>, на который вы ссылаетесь, скорее всего, нене добавил AMP.Единственный CSS, добавленный AMP, находится в amp.css и , в поиске репозитория AMPHTML для "social-link" результатов нет.Мое лучшее предположение состоит в том, что он добавляется расширением браузера (возможно, каким-либо блокировщиком рекламы / отслеживания) или чем-то подобным.Можете ли вы попробовать воспроизвести в другом браузере или на другом устройстве?

...