                        課程
                    
                        /前端開發(fā)
                        
                            /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">國內(nèi)新聞</a>
????????<a?href="#InternationNews">國際新聞</a>
????</div>
</div>
<div?class="dropdown"?>
??<button?class="dropbtn">聯(lián)??系</button>
??<div?class="dropdown-content">
????<a?>菜單一</a>
????<a?>菜單二</a>
????<a?>菜單三</a>
??</div>
??</div>
<div?class="dropdown"?>
????<a?href?="#home"><button?class="dropbtn"?>關(guān)??于</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編碼下正常！