在本節課程中，我的span做出來的圓形變成了橢圓，求大神指明為什么~？
代碼如下（都是按照教程一字一句打的）
html代碼部分
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edg">?<!--/*強制ie使用最新的渲染模式*/-->
<meta?name="viewport"?content="width=device-width"?initial-scale="1">?<!--/*強制html與設備屏幕等寬，且初次打開時縮放比為100%*/-->
<link?rel="stylesheet"?href="./tooltip.css"?/>
<title>css3實現tooltip效果</title>
</head>
<body>
<nav>
<ul>
<li>
<a?href=""?class="tooltip?tooltip-effect-1">
Home
<span?class="tooltip-content"><i></i></span>
</a>
</li>
<li>
<a?href=""?class="tooltip?tooltip-effect-2">
About?me
<span?class="tooltip-content"><i></i></span>
</a>
</li>
<li>
<a?href=""?class="tooltip?tooltip-effect-3">
Photography
<span?class="tooltip-content"><i></i></span>
</a>
</li>
<li>
<a?href=""?class="tooltip?tooltip-effect-4">
Work
<span?class="tooltip-content"><i></i></span>
</a>
</li>
<li>
<a?href=""?class="tooltip?tooltip-effect-5">
Contact
<span?class="tooltip-content"><i></i></span>
</a>
</li>
</ul>
</nav>
</body>
</html>
css部分
/*global*/
html{
width:?100%;
height:?100%;
-webkit-text-size-adjust:?none;/*設置字體大小不隨著屏幕旋轉而改變*/
-moz-text-size-adjust:?none;
-ms-text-size-adjust:none?;
-o-text-size-adjust:none?;
text-size-adjust:none?;
}
body{
margin:?0;
padding:?0;
width:?100%;
height:?100%;
background:?#47c9af;
color:?#74777b;
font-weight:?300;
font-size:?1.5em;
font-family:?"Raleway",arial;
}
ul{
padding:?0;
margin:?0;
list-style:?none;
}
a:link,a:visited,a:focus{
text-decoration:?none;
outline:?none;
}
*,*:after,*:before{
-webkit-box-sizing:?border-size;
-moz-box-sizing:border-size;
-ms-box-sizing:border-size;
-o-box-sizing:border-size;
box-sizing:border-size;
}
*:after,*:before{
display:?block;
content:?"";
}
*:after{
clear:?both;
}
/*navgaitor*/
nav{
width:?900px;
height:?300px;
margin:200px?auto;
}
nav?li{
display:?inline-block;
margin:?0?1em;
}
.tooltip{
display:?inline-block;
font-weight:?700;
color:?rgba(0,0,0,0.3);
padding:?0.15em?0.25em?0?;
position:?relative;
z-index:?1;
}
.tooltip-content{
position:?absolute;
z-index:?10;
width:?80px;
height:?80px;
border-radius:?50%;
background:?#FFFFFF;
left:?50%;
margin-left:?-40px;
bottom:?100%;
margin-bottom:?20px;
text-align:?center;
/*padding-top:?25px;*/
}教程視頻五分鐘的時候，按照步驟加入padding-top: 25px;就變橢圓了，請問是怎么回事？
2020-05-09
2016-03-22
嗯~不用回答了= = ? 是我自己粗心大意把box-sizing屬性的值打錯了