Question

我花了好几个小时后尝试并解决了下面的问题。在FF中悬停时，第一个链接没有加下划线，但在我尝试过的所有其他浏览器中都有效。第二个链接也适用于Firefox。网站上的大多数现有html都是以下面的方式构建的，因此我们将非常感谢网站范围的修复。

HTML： ~~（粘贴代码会删除代码）~~ http://pastebin.com/duqfKGeY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
FF test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="ff.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table>
        <tbody>
    <tr>
            <td>

        <ul type="disc">

                    <li>
            <a target="_blank" href="http://example1.com">
                <font size="2" color="#b80000"><b>Example Link 1</b></font></a>

                        <br>

            <font size="2" face="Verdana"> 

                example text  example text  example text  example text  example text  example text                  example text  example text  example text  example text  example text  example text                   example text  example text  example text  example text             example text 
                <a target="_blank" href="http://example2.com/">
                 <font size="2" face="Verdana" color="#b80000">Example link 2</font>
                </a>

                  example text  example text  example text  example text  example text  example text                    example text  example text  example text  example text  example text  example text  example text                example text  example text  example                 text  example text .
            </font> 
         </li>

        </ul>
        </td>
        </tr>
    </tbody>
</table>
</body>
</html>

CSS：

a{color:#b80000;}
a:link{color:#b80000;text-decoration:none;}
a:visited{color:#b80000;text-decoration:none;}
a:hover{color:#b80000;text-decoration:underline;}
a:active{color:#b80000;}

编辑：在W3C验证器上验证没有任何错误

Answer 1

首先，首先，

布局表 - 请自学：

http://shouldiusetablesforlayout.com

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

<font>代码已被弃用很久以前，我们现在使用CSS和<span>代码来满足我们所有的样式需求。

最有可能的原因是因为你的HTML基本上是完全错误的，是的，它可以工作，但是它会杀死interwebz - 这是你的布局重做<div>标签和CSS - 干净整洁每个人都很开心：

<强> Live Demo

此外 - 验证 - 它只是一个工具，而不是一个渴望的标准，确定它有助于消除错误，但它最终可能会让你麻烦尝试100％兼容（盯着XHTML Strict ）更多关于这一点：

http://net.tutsplus.com/articles/general/but-it-doesnt-validate/

Answer 2

<B>标记覆盖了text-decoration。只需添加：

a:hover b{text-decoration:underline;}

如果还有其他人你甚至可以这样做：

a:hover > *{text-decoration:underline;}

Answer 3

我只会使用这一点：

一个{文字修饰：无;} ：悬停{文字修饰：下划线;}

没有理由说这不起作用。

Answer 4

我看到：在FF 3.6 / Mac中的两个链接上都悬停下划线，即使它们是访问过的链接。

正如Alex Thomas指出的那样，你的CSS可以更简洁 - 考虑到所有的链接状态都是相同的颜色，只有：悬停状态因下划线而不同。

即使来自Google文档的糟糕HTML具有font标签上的颜色（复古，呃？），请复制CSS中的颜色规则，以便：悬停下划线显示正确的颜色：

a {
color: #b80000;
text-decoration:none;
} 
a:hover{ text-decoration:underline;}

Answer 5

问题可能出在text-decoration: underline; CSS语句中。 Firefox在版本3.6中忽略了这一点。我知道版本7.0它工作得很好，但我不知道它何时被修复。

您使用的是哪个版本的Firefox？

鼠标悬停不仅仅在firefox中工作

5 个答案: