html - 我不明白为什么提要的 URL 在列表项中时不起作用

Question

[我正在编辑这个问题，希望能得到有用的答案。提供的一个答案没有回答关于为什么 RSS 提要的链接在放入列表项时不起作用的问题。这也是一个无用的答案，因为如果您从链接中删除/feed，您将不会转到 RSS 提要页面——它只会重新加载当前页面。]

我有一个与该网站相关的其他网站(例如社交媒体帐户)的元素符号列表。列表中包含指向网站 RSS 提要的链接。每个列表项都使用一个有代表性的图标而不是文本。在前四个列表项中，图标是用作背景图像的 SVG 图像。您可以单击背景 SVG 图像并转到列表项中的 URL。在第五个列表项中，我必须使用图形图标，因为 RSS (#icon-rss) 的 SVG 图标不起作用。我认为无论图标是 SVG 图像还是图形图像，操作都是一样的。

我的问题是他们的行为不一样。 RSS 提要的链接在浏览器中单独使用时有效，因此我知道该链接是有效链接。但是，当该 RSS 提要链接位于使用背景图像作为元素符号的列表项中时，该链接不起作用。当我单击 RSS 的背景图像时，加载动画出现在页面中间并且只是旋转和旋转——它从不加载提要页面。它在 Firefox 和 Safari 中的行为方式相同。

SVG 图像的 CSS 会更改悬停时图标的颜色。还有 CSS 可以在悬停时将 RSS 图标的背景图像的一种颜色切换为另一种颜色的图像。

为什么提要链接在带有图像的列表项中时不起作用？它适用于没有图像的列表项:

    <ul>
        <li><a href="https://botanical-art.baeecorp.org/feed">RSS feed</a>.</li>
    </ul>

谢谢。

这是 CSS:

.sidebar-social-navigation ul {
    list-style: none;
    margin: -0.3em 0 -0.1em 0;
}

.sidebar-social-navigation li {
    display: inline-block;
}

.sidebar-social-navigation li a:link {
    background-color: #2222ac;  /*----Persian blue ----*/
    -webkit-border-radius: 50px;
    border-radius: 50px;
    color: #fefdff;  /*----Splashed white ----*/
    height: 50px;
    margin: 0 0.5em 0.5em 0;
    text-align: center;
    width: 50px;
}

.sidebar-social-navigation li a:visited {
    color: #fefdff;  /*----Splashed white ----*/
}

.sidebar-social-navigation li a:hover,
.sidebar-social-navigation li a:focus,
.sidebar-social-navigation li a:active {
    background-color: #129e6c;    /*   pool table green    */
}

.sidebar-social-navigation .icon {
    height: 28px;
    top: 12px;
    width: 28px;
    vertical-align: top;
}

.sidebar-social-navigation .rssbluicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/rss-logo-blue-28x28.png');
}

.sidebar-social-navigation .rssbluicon:hover,
.sidebar-social-navigation .rssbluicon:focus,
.sidebar-social-navigation .rssbluicon:active {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/rss-logo-green-28x28.png');
}

这是三个列表项的 HTML:

<div class="sidebar-social-navigation">
    <ul>
    <li><a href="https://www.twitter.com/BaeeArtists" style="-moz-user-select: none;"><span class="screen-reader-text">Twitter</span><svg class="icon icon-twitter" aria-hidden="true" role="img"> <use href="#icon-twitter" xlink:href="#icon-twitter"></use> </svg></a></li>
    <li><a href="https://www.facebook.com/baeeorg" style="-moz-user-select: none;"><span class="screen-reader-text">Facebook</span><svg class="icon icon-facebook" aria-hidden="true" role="img"> <use href="#icon-facebook" xlink:href="#icon-facebook"></use> </svg></a></li>
    <li><a href="https://botanical-art.baeecorp.org/feed" title="RSS feed"><span class="screen-reader-text">RSS</span><img class="icon rssbluicon" /></a></li>
    </ul>
    </div>

Answer 1

看起来问题出在您使用“nextgen fancybox”的插件脚本上。

看起来，默认情况下，它会查找每个 <img>在父级为 <a> 的页面上标记，并将 fancybox 处理附加到它。

检查该插件的配置，看看您是否可以更改它选择要附加到的图像的方式。否则，您可以避免使用 <img>该链接中的标记(因为它只是一个占位符)。