标题不是最好的，但我真的不知道如何更好地描述它。
问题是，当我将鼠标悬停在我的#navigation div 上时，看起来我的#content div 的字体样式发生了变化。但它只在 Chrome 上执行此操作。当我在 Opera 或 FireFox 中查看它时，它运行正常。
有人知道如何解决这个问题吗？
Ps：Ubuntu字体是通过谷歌字体加载的。
HTML
<body>
<div id="wrapper">
<div id="navigation">
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Home</h2>
<h3 class="ca-sub">Startpagina</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">H</span>
<div class="ca-content">
<h2 class="ca-main">Portfolio</h2>
<h3 class="ca-sub">Websites en drukwerk</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">N</span>
<div class="ca-content">
<h2 class="ca-main">Over Ons</h2>
<h3 class="ca-sub">Doel en motto</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">K</span>
<div class="ca-content">
<h2 class="ca-main">Contact</h2>
<h3 class="ca-sub">Adresgegevens</h3>
</div>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Home - Portfolio - Over Ons - Contact</h1>
<p>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a>
Quisque sed ligula vitae erat sollicitudin gravida.
Fusce adipiscing fringilla nibh ut feugiat.
In hac habitasse platea dictumst.
Donec ut nisi in dolor luctus eleifend.
Vivamus eleifend suscipit ipsum vitae posuere.
Morbi vestibulum erat eu nulla aliquet sagittis quis tempor lorem.
Sed orci nunc, dapibus eu cursus sit amet, fringilla a sapien.
Nullam non massa nunc.
</p>
</div>
</div>
CSS
body {
background: url('../images/noise.png') rgba(51, 51, 51, 1);
width: 100%;
height: 100%;
overflow-y: scroll;
}
#content h1, h2, h3 {
font-family: Ubuntu, sans-serif;
}
#content h1 {
color: rgba(0, 135, 255, 1);
font-size: 32px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(0, 135, 255, 1);
line-height: 36px;
}
#content h2 {
color: rgba(77, 184, 255, 1);
font-size: 24px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(77, 184, 255, 1);
line-height: 28px;
}
#content h3 {
color: rgba(130, 205, 255, 1);
font-size: 18px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(130, 205, 255, 1);
line-height: 22px;
}
#content p {
color: rgba(0, 0, 0, 1);
font-size: 16px;
margin: 4px;
font-family: Ubuntu, sans-serif;
line-height: 20px;
}
#content a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
border-bottom: 1px dashed rgba(0, 0, 0, 1);
transition: all 300ms ease;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
}
#content a:hover {
border-bottom: 1px dashed rgba(130, 205, 255, 1);
color: rgba(130, 205, 255, 1);
}
#wrapper {
margin: 10px auto;
padding: 0;
width: 940px;
height: 100%;
}
#navigation {
position: relative;
width: 220px;
height: 415px;
margin: 0 10px 0 0;
float: left;
}
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols.woff');
font-weight: normal;
font-style: normal;
}
.ca-menu{
padding: 0;
margin: 0 auto;
width: 220px;
}
.ca-menu li{
width: 220px;
height: 100px;
overflow: hidden;
position: relative;
display: block;
background: rgba(255, 255, 255, 1);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
margin-bottom: 5px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.ca-icon{
color: rgba(0, 0, 0, 1);
font-family: 'WebSymbolsRegular', cursive;
font-size: 24px;
text-shadow: 0px 0px 1px rgba(51, 51, 51, 1);
line-height: 100px;
position: absolute;
width: 70px;
left: 0px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 65px;
width: 370px;
height: 60px;
top: 32px;
}
.ca-main{
font-size: 24px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family: Ubuntu, sans-serif;
color: rgba(77, 184, 255, 1);
}
.ca-sub{
font-size: 14px;
color: rgba(102, 102, 102, 1);
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family: Ubuntu, sans-serif;
}
.ca-menu li:hover{
background: rgba(130, 205, 255, 1);
}
.ca-menu li:hover .ca-icon{
font-size: 36px;
color: rgba(130, 205, 255, 1);
opacity: 0.8;
text-shadow: -1px -1px 5px rgba(255, 255, 255, 1), 1px 1px 5px rgba(255, 255, 255, 1);
}
.ca-menu li:hover .ca-main{
opacity: 1;
color: rgba(51, 51, 51, 1);
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
opacity: 1;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
from {
opacity: 0;
-webkit-transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
opacity: 0;
-moz-transform: translateY(200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
opacity: 0;
-ms-transform: translateY(200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
@-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(-200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromTop {
from {
opacity: 0;
-moz-transform: translateY(-200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromTop {
from {
opacity: 0;
-ms-transform: translateY(-200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
#content {
position: relative;
width: 700px;
margin: 0 0 0 10px;
padding: 0;
float: right;
}