旋轉鏈接文字在Firefox中懸停時跳轉

在IE和Chrome中完美工作。我覺得很受Firefox的背叛。它永遠不會導致我的問題。 Hmpht！旋轉鏈接文字在Firefox中懸停時跳轉

我已經試過這裏的一切我和谷歌你們能想到的都無濟於事。所以我會告訴你所有的點點滴滴，希望有一個非常棒的人前來保存一天！

現場

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）

來源

2014-06-23 Ms Bixx

「跳轉」是什麼意思？我使用Firefox瀏覽您的網站，但我可以看到任何跳轉或類似的情況。 – neoDev

當我將鼠標懸停在FF中的鏈接上時，文本會稍微移動一下。例如在「博客」上，g靠近o。它不會在IE或Chrome中執行此操作。你沒有看到這個？ –

第一期：當您使用「ID」時，它必須是唯一的，不適用於頁面上的多個div。你應該使用'class =「menurotate」'來代替並改變CSS來使用。代替＃。不知道這會影響到這一點，但也許... 我在FF看到，如果我快速將鼠標懸停在上面，文本短暫出現翻倍，約1px的差異，然後解決。緩慢移動或僅在邊緣移動不會產生這種效果。不知道它會做的是W /常規字體VS @字體面... – mc01

爲避免這種情況的文字效果，仍然有這種不透明的效果，

你可以通過設置懸停鏈接translucide面罩而沒有切換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) 
}

或減少這種跳躍的效果，過渡可以流暢的這個defaut：

#menurotate {transition:0.5s;}

而作爲mentionned，id只能每個文檔使用一次，把id="menurotate"成class="menurotate"和更新選擇#menurotate到樣式表中的.menurotate。

來源

2014-06-24 00:00:32

旋轉鏈接文字在Firefox中懸停時跳轉

回答

相關問題