HTML 链接工作不正常并且不可见答案

【问题标题】：HTML link working improperly and showing up invisiblyHTML 链接工作不正常并且不可见
【发布时间】：2012-03-01 14:14:40
【问题描述】：

我正在尝试向我的代码添加一个简单的 HTML 链接，但它没有显示出来。导航栏的链接显示得很好，但是常规链接只显示为不可见，这意味着我只能通过将鼠标悬停在它上面来看到它，它什么也不做。我认为这可能是我创建的 CSS 样式的问题，但我检查了代码并没有发现任何错误。

/*STYLE FORMATTING FOR THE NAVIGATION BAR*/
.nav ul
{
list-style-type:none;
padding:0;
margin:0;
overflow:hidden;
background-color:#6b234b;
width:1000px;
}
.nav li
{
display: inline-block;
}
.nav a:link,a:visited
{
display:block;
width:188.51px;
font-size:1.20em;
letter-spacing:3px;
font-family:"ostrich";
color:#FFFFFF;
background-color:#6b234b;
text-align:center;
padding:4px;
text-decoration:none;
}
.nav a:hover,a:active
{
background-color:#a03771;
}

/*STYLE FORMATTING FOR REGULAR LINKS*/
.links a:link
{
text-decoration:none;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;
}
.links a:visited
{
text-decoration:none;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;
}

.links a:active
{
text-decoration:underline;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;}

.links a:hover
{
text-decoration:underline;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;}

这是我试图用随附的 HTML 实现的 HTML 链接。

<table style="float:left;">
<tr>
<td style="vertical-align:top;">
<table style="padding-left:40px; max-width:530px;">

<!--BEGIN ENTRY-->
    <tr>
    <td>
        <p class="newsinfotitle">Info</p>       
    </td>
    </tr>
    <tr>
    <td>
        <img class="right" src="easterisland.jpg"/>
        <p class="newsinfo">Info</p>
        <a class="links" href="#">See More</a>
    </td>
    </tr>

    <tr>
    <td>
        <hr/>
    </td>
    </tr>
<!--END ENTRY-->

【问题讨论】：

该锚是否嵌套在其他标签中？
对我来说似乎工作正常。您将需要发布更多的html。 jsfiddle.net/8Dqtd
完全不加载 CSS 时会发生这种情况吗？
在什么浏览器中会失败？
在 Firefox 中失败。是的，锚嵌套在一个表中，该表嵌套在另一个表中。我会发布更多的 HTML。我会尝试看看它是否在没有 CSS 的情况下加载。

标签： html css hyperlink formatting styles

【解决方案1】：

只需在您的 CSS 中检查此部分

.nav a:link,a:visited
{
display:block;
width:188.51px;
font-size:1.20em;
letter-spacing:3px;
font-family:"ostrich";
color:#FFFFFF;
background-color:#6b234b;
text-align:center;
padding:4px;
text-decoration:none;
}

您已在访问时提供了链接颜色#FFFFFF。因此，当您访问链接时，它会将链接的文本更改为白色，并且背景颜色为白色，这就是文本不可见的原因。只要改变那里的颜色，你就能得到好的结果。如果有任何疑问，请告诉我。

【讨论】：

嗯，就是这样。这仅适用于 .nav 类。我遇到问题的链接由 .links 类定义，其中链接的颜色始终为 #000000

【解决方案2】：

试试这个

<style type="text/css">
.nav ul {
list-style-type:none;
padding:0;
margin:0;
}
.nav li {
display: inline-block;
}
.nav a:link,a:visited {
display:block;
width:188.51px;
font-size:12px;
letter-spacing:3px;
font-family:"ostrich";
color:#cccccc;
text-align:center;
text-decoration:none;
}
.links a:link {
text-decoration:none;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
a.links {
  color: #F00;
  font-size: 12px;
}
.links a:visited {
text-decoration:none;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
.links a:active {
text-decoration:underline;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
a.links:hover {
text-decoration:none;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
  </style>

希望它能帮助你。你有一个错误。你使用了.links a:hover，应该是a.links:hover。希望这对你有帮助。只要保持你的css和标记干净，你就可以做得很好。

【讨论】：

嗯...它可以工作，但是该代码弄乱了我为导航栏设置的样式。我已经找到了问题，但我不知道如何解决它。我有两种不同的链接样式这一事实并没有被清楚地识别出来。我将 .nav 类中链接的颜色更改为 #00000 并且 .links 类中的链接继承了这种样式。然而，奇怪的是它没有从两个类中的任何一个继承任何其他属性/格式。相反，导航栏链接之外的任何链接都显示为默认的 HTML 链接。
如果你得到了答案，那么只需通过点击正确的符号图标接受我的答案并让它投票和其他事情你的代码已经搞砸了。所以请说清楚。这样其他用户就会清楚地知道你的问题。

【解决方案3】：

试试这个..如果你想在活动时更改背景颜色，只需更改那里..

.nav a:link,a:visited
{
display:block;
width:188.51px;
font-size:1.20em;
letter-spacing:3px;
font-family:"ostrich";
color:#666;enter code here
background-color:#6b234b;
text-align:center;
padding:4px;
text-decoration:none;
}
.nav a:hover,a:active
{
background-color:#6b234b;
}

【讨论】：