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

Question

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

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

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

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

为什么提要 link 在包含图像的列表项中时不起作用？它适用于没有图像的列表项：

    <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

RSS feed.

只需删除 /feed 即可。

Answer 2

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

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

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

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

I can't figure out why the URL to the feed doesn't work when it is in a list item

html

css

svg

background-image