我的div中的字母I似乎存在某种问题。我尝试了很多不同的单词和随机字母组合，但似乎找不到“模式”。
当你将div放在顶部时（参见jsfiddle），其中带有“I”的div会快速改变它的大小。另请注意，悬停的div应该会改变大小，但只会改变悬停的div。
我遇到了“项目”这个词的麻烦，如果你找到一个解决方法/修复方法，有些东西可以阻止它重新调整大小，或者根本没有任何提示，请发表回答/评论，一切都表示赞赏。< / p>
HTML
<body>
<div id='wheel'></div>
<div class='wrapper'>
<div id='header'> <a href='' class='nav-link'>Test</a>
<a href='' class='nav-link'>test</a>
<a href='' class='nav-link'>test</a>
<a href='' class='nav-link'>Items</a>
<a href='' class='nav-link'>test</a>
</div>
<div class='box'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper, nisi ac lacinia blandit, arcu erat sodales tellus, non interdum leo ipsum nec turpis. Sed porta eros ut lobortis tristique. Cras fermentum nulla id ligula accumsan iaculis. Sed eleifend ultrices elit, ac ultrices diam pharetra vitae. Morbi sit amet urna in mi lobortis ornare ac eget metus. Curabitur mollis condimentum ipsum quis pretium. Etiam et elementum nisl. Aliquam vitae nisl nec lectus molestie lobortis sit amet at nisi. Nulla in lectus vel quam consectetur interdum ac sit amet tortor. Curabitur fermentum justo velit, ac accumsan augue porta eget. Cras elit turpis, volutpat nec enim in, facilisis dictum enim. Curabitur ut mattis neque, ac volutpat metus. Aliquam auctor lorem eget sem elementum tempor eu id turpis. In facilisis, erat auctor vestibulum euismod, tellus odio convallis velit, non blandit nisl nisi vel magna. Morbi pulvinar purus in ultrices aliquet. Cras pellentesque augue a augue elementum fringilla. Nulla tempor nec ante pharetra fringilla. Nam semper semper purus, quis accumsan libero ultricies a. Cras orci neque, tristique sit amet quam nec, interdum cursus leo. Integer eu tempus metus, sit amet euismod massa. Maecenas consequat tincidunt velit, malesuada faucibus dolor pharetra et. Morbi a nulla ante. Integer placerat posuere elit non laoreet. Vivamus facilisis eros sit amet purus tincidunt pretium. Ut in ante rutrum, faucibus tortor eget, lacinia quam. Sed orci augue, rhoncus id faucibus quis, lacinia id nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rutrum tellus sit amet sem luctus, et iaculis ante iaculis. Etiam elementum nunc et nisl rutrum, sit amet aliquet turpis blandit. Nam viverra lectus vulputate porta elementum. Etiam tortor lacus, ultricies et interdum et, lobortis non libero. Nunc dapibus, lectus nec venenatis consequat, lectus ligula tempus felis, eget laoreet velit eros non enim. Aliquam non augue odio. Vivamus risus sem, posuere sit amet ultricies faucibus, rutrum a nibh. Nullam non libero a mauris rutrum imperdiet non sollicitudin risus. Vestibulum facilisis ligula quis velit faucibus, eu pellentesque leo faucibus. Fusce diam augue, scelerisque sit amet elit at, volutpat adipiscing nibh. Quisque faucibus nisi eget risus tincidunt, at tempus ante pellentesque. Praesent vulputate, purus sit amet laoreet consectetur, ligula sem iaculis mauris, et varius libero mi eleifend justo. Cras eu neque malesuada, fringilla nibh vitae, luctus lorem. Vivamus auctor tempus convallis. Etiam feugiat lobortis nunc sit amet laoreet. Mauris sapien sapien, dapibus eget porttitor sed, rutrum vitae erat. Maecenas eros orci, dignissim vel nulla sed, tincidunt tempus metus. Aliquam auctor dui eget mi blandit scelerisque. Ut vel tristique quam. Nunc laoreet laoreet rhoncus. Nunc ut nunc at nisl lobortis eleifend. Pellentesque convallis ipsum id cursus vulputate. Nunc eget ipsum non nisl malesuada facilisis bibendum suscipit lectus. Integer ante neque, placerat at lectus quis, adipiscing placerat ipsum. Quisque a auctor sem. Nunc eu vehicula purus. In congue lorem purus, in euismod dolor dictum ac. Etiam vitae dolor vel nisi egestas porttitor. Aliquam ultricies libero sit amet eros interdum, ut adipiscing lacus sollicitudin. Proin vitae dapibus massa. Donec blandit et massa ut scelerisque. Nulla eu leo at magna imperdiet commodo sed ut libero.</div>
</div>
</body>
CSS
@charset"utf-8";
/* CSS Document */
body, html {
font-family:'Calibri';
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
background-color:#141414;
min-width:920px;
min-width:900px;
line-height:120%;
letter-spacing:0.5px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
}
#wheel {
background-image:url(../img/wheel.png);
position:absolute;
left:-400px;
top:-100px;
height:1190px;
width:1190px;
animation:rotate 140s linear infinite;
-webkit-animation:rotate 140s linear infinite;
/* Safari and Chrome */
}
@keyframes rotate {
from {
-webkit-transform:rotateZ(0deg);
}
to {
-webkit-transform:rotateZ(360deg);
}
}
@-webkit-keyframes rotate
/* Safari and Chrome */
{
from {
-webkit-transform:rotateZ(0deg);
}
to {
-webkit-transform:rotateZ(360deg);
}
}
.wrapper {
width:90%;
max-width:1400px;
min-width:900px;
margin:0 auto;
}
.box {
position:relative;
border-radius:10px;
color:#FFF;
background-color:rgba(27, 27, 27, 0.7);
border:2px solid #333;
box-shadow: #000 3px 0 0 0 inset, #000 0 3px 0 0 inset, #000 0 -3px 0 0 inset, #000 -3px 0 0 0 inset;
padding:15px;
}
#header {
overflow:hidden;
position:relative;
margin-bottom:20px;
}
.nav-link {
background: #313131;
/* Old browsers */
background: -moz-linear-gradient(top, #313131 0%, #1e1e1e 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #313131), color-stop(100%, #1e1e1e));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #313131 0%, #1e1e1e 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #313131 0%, #1e1e1e 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #313131 0%, #1e1e1e 100%);
/* IE10+ */
background: linear-gradient(to bottom, #313131 0%, #1e1e1e 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#313131', endColorstr='#1e1e1e', GradientType=0);
/* IE6-9 */
color:#FFF;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-bottom:1px solid #161416;
border-left:1px solid #2f2f2f;
border-right:1px solid #222522;
float:left;
padding:30px;
margin:0 20px 5px 0;
font-size:22px;
box-shadow:#000 0 2px 5px 0;
text-decoration:none;
}
.nav-link:hover {
animation:hover 0.1s linear infinite;
-webkit-animation:hover 0.1s linear;
/* Safari and Chrome */
}
@keyframes hover {
0% {
padding:30px;
margin:0 20px 5px 0;
}
50% {
padding:25px;
margin:0 25px 10px 5px;
}
100% {
padding:30px;
margin:0 20px 5px 0;
}
}
@-webkit-keyframes hover
/* Safari and Chrome */
{
0% {
padding:30px;
margin:0 20px 5px 0;
}
50% {
padding:25px;
margin:0 25px 10px 5px;
}
100% {
padding:30px;
margin:0 20px 5px 0;
}
}
答案 0 :(得分：1)