在IE和Chrome中完美运行。我觉得Firefox被出卖了。它永远不会给我带来麻烦。哼！
我已经尝试了我和Google的所有工作，在这里的你们都认为无济于事。因此，我将向您展示所有细节，并希望有一个非常出色的人来拯救这一天！
现场
http://mctesterson.net16.net/
的CSS
body {
background:#000000 url(images/backmain.jpg) no-repeat fixed;
overflow-y:scroll;
padding:0;
margin:0;
}
body,html,#menu,#menu:before {
height:100%;
}
#title {
position:relative;
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
font-size:60px;
color:#000000;
font-weight:bold;
text-align:left;
padding:0;
margin:0 0 40px -60px;
}
@font-face {
font-family:kaushan;
src:url(images/kaushan.eot);
}
@font-face {
font-family:kaushan;
src:url(images/kaushan.ttf);
}
a:link,a:visited,a:hover,a:active {
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
color:#CE0000;
font-size:25px;
font-weight:bold;
text-decoration:none;
outline:none;
}
#menu {
position:relative;
text-align:center;
padding:0;
margin:0;
}
#menu:before,#menumiddle {
display:inline-block;
vertical-align:middle;
}
#menu:before {
content:"";
}
#menurotate {
background:url(images/backmain.png) repeat;
float:left;
border:1px solid #000000;
border-radius:5px;
-webkit-transform:rotate(40deg);
-moz-transform:rotate(40deg);
-ms-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-moz-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-webkit-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:10;
-khtml-opacity:10;
opacity:10;
padding:10px;
margin:0 20px;
}
#menurotate:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
的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" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="main.css" type="text/css"/>
<meta name="description" content="Things and stuff."/>
<meta name="keywords" content="web design,fiction,blog,"/>
<meta name="robots" content="noindex,follow"/>
<title>Oh Edie!</title>
</head>
<body>
<div id="menu">
<div id="menumiddle">
<div id="title">Oh Edie!</div>
<div id="menurotate"><a href="">About</a></div>
<div id="menurotate"><a href="">Web Design</a></div>
<div id="menurotate"><a href="">Fiction</a></div>
<div id="menurotate"><a href="">Blog</a></div>
<div id="menurotate"><a href="">Contact</a></div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
预先感谢您的所有可爱帮助：o）
最佳答案
为了避免这种文字效果并且仍然具有这种不透明效果，
您可以将链接设置为半透明掩码而不是切换opacity；
#menurotate:hover:before {
content:'';
position:absolute;
top:-0px;
left:-0px;
right:-0px;
bottom:-0px;
background:rgba(255,255,255,0.4);
border-radius:5px;
box-shadow:0 0 20px rgba(255,255,255,0.6)
}
或为了减少这种跳动的效果，过渡可以使这种不平滑状态更平滑：
#menurotate {transition:0.5s;}
如前所述，每个文档只能使用
id，将id="menurotate"转换为class="menurotate"，并将样式表中的选择器#menurotate更新为.menurotate。关于html - 旋转的链接文本在Firefox中悬停时跳转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24376160/