0

在花了几个小时之后，我已经尝试并隔离了下面的问题。第一个链接在 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 Validator 上验证没有任何错误

4

5 回答 5

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> tags were deprecated LONG ago, we now use CSS and <span> tags for all our styling needs.

The most likely reason why stuff doesn't work is because your HTML is basically completely wrong, yes it works but it is killing the interwebz - Here is your layout redone with <div> tags and CSS - nice and clean and everyone is happy:

Live Demo

Also - validation - It is just a tool, not a standard to aspire to, sure it helps fish out bugs but it could end up causing you hassle trying to be 100% compliant (Stares at XHTML Strict) more on that here:

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

于 2011-02-18T18:50:13.337 回答
1

The <B> tag is overriding the text-decoration. Just add this:

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

If there are others you could probably even do:

a:hover > *{text-decoration:underline;}
于 2011-02-18T21:40:40.007 回答
0

这有点过头了，我只想使用：

一个{文本装饰：无；} a：悬停{文本装饰：下划线；}

应该没有理由为什么这不起作用。

于 2011-02-18T18:25:45.953 回答
0

I see the :hover underline on both links in FF 3.6/Mac, even when they are visited links.

As Alex Thomas pointed out, your CSS can be more concise--consider that all the link states are the same color, and only the :hover state differs by having an underline.

Even though the crummy HTML from Google Docs has the color stated on those font tags (retro, eh?), duplicate the color rule in your CSS so the :hover underline appears in the correct color:

a {
color: #b80000;
text-decoration:none;
} 
a:hover{ text-decoration:underline;}
于 2011-02-18T20:46:41.260 回答
0

The problem may be with the text-decoration: underline; CSS statement. Firefox ignores this in version 3.6. I know by version 7.0 it works just fine, but I don't know when it was actually fixed.

What version of Firefox are you working with?

于 2012-03-08T21:37:53.123 回答