我创建了一个简单的网页,三个链接在悬停时字体增加了 110%,这些链接也应该在鼠标悬停时改变颜色。
在 IE 中,除了“联系我们”链接之外,这些链接都按预期运行,而在 Firefox 中则相反,只有第一个链接不会改变颜色。
@font-face {
font-family: 'ChollUni';
src: url('fonts/ChollUni.eot?#iefix') format('embedded-opentype'),
url('fonts/ChollUni.woff') format('woff'),
url('fonts/ChollUni.ttf') format('truetype'),
url('fonts/ChollUni.svg#ChollUni') format('svg');
}
#logo {
padding: 100px 100px 100px 100px;
}
#links {
text-align:center;
text-decoration:none;
margin: 10px auto;
color:#4F91CD;
font-family: 'ChollUni',Helvetica, san-serif;
font-size:22px;
}
#links a:link {
text-decoration:none;
color:#4F91CD;
}
#links a:hover {
color:#244d71;
text-decoration:underline;
font-size:110%
}
#links a:visited {
text-decoration:none;
color:#4F91CD;
}
#footer {
text-align: center;
padding: 35px 90px 35px 90px;
color: #999;
font-family: 'ChollUni',Helvetica, san-serif;
position: absolute;
left: 7px;
top: 424px;
}
HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="fonts.css" type="text/css" charset="utf-8" />
<title>Some Company Website</title>
</head>
<body>
<div id="logo">
<center><img src="Images/logo.png"></center>
</div>
<div id="links">
<a href="http://www.SomeCompany.ca/mewebmail">Customer Email</a>
<a href="http://www.SomeCompany.ca/meadmin">Webmail Administration</a>
<a href="contact.html">Contact Us</a>
</div>
<br />
<br />
<div id="footer">
Copyright 2013 Some Company © All Rights Reserved
</div>
</body>
</html>