                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

有没有人知道utf8编码下，文字背景填充大小不一样的情况如何解决？

<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<html>
<head>
<title>云中之翼个人主页</title>
</head>
<h1 class="padding">欢迎访问</h1>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="dropdown" >
    <a href ="#home"><button class="dropbtn" >首  页</button></a>        
    </div>
<div class="dropdown" >
    <button class="dropbtn">新  闻</button>
    <div class="dropdown-content">
        <a href="#NationNews">国内新闻</a>
        <a href="#InternationNews">国际新闻</a>
    </div>
</div>
<div class="dropdown" >
  <button class="dropbtn">联  系</button>
  <div class="dropdown-content">
    <a href="http://www.runoob.com">菜单一</a>
    <a href="http://www.runoob.com">菜单二</a>
    <a href="http://www.runoob.com">菜单三</a>
  </div>
  </div>
<div class="dropdown" >
    <a href ="#home"><button class="dropbtn" >关  于</button></a>        
    </div>
 
</body>
<style>
#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;}

h1 {
    color:white;
    font-size:40px;
    text-align:center;
    background-color:#04bc7c;
    
    }
h1.padding {
        padding-top:20px;
        padding-bottom:20px;            
        border:5px solid #32b16c;
        border-width:thick;
        border-style:double;
        margin:20px;
        outline:solid black;
        outline-width:2px;
    }
ul {
    list-style-type:none;    
    padding-left:20px;
}
li {
    display:inline;
}



.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 5px 20px 5px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    box-sizing: 100px 30px;
    width: 100px;
    height: 30px;
    position: relative;    
    display: inline-block;    
    
}
    
.dropdown-content {
    display:none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;   
    border:5px solid gray;
    margin:0px;
}
</style>
</html>

亲测gpk编码下正常！