html - Chrome 显示搭配不同

Question

对不起我的英语...，我是 html/css 的新手..，我的问题:我必须写这个Codec .CSS 编解码器:

body {
 background-color: #ebf5d7;
 grid-gap: 5px;
 grid-template-columns: 10% 72% 17%;
 grid-template-areas:

 "header   header   header"   
 "nav      nav      nav" 
 "linkBox  linkBox  linkBox"    
 "main     main     main"     
 "infoBox  infoBox  infoBox"  
 "footer   footer   footer" ;  
}
@media screen and (min-width: 40em) {
body {
display: grid;
grid-template-columns: 10% 72% 17%;
 grid-template-areas:
"header  header  header" 
"nav     nav     nav"     
"linkBox main    infoBox"
"footer  footer  footer";
 }
}
body > header {
grid-area: header;
background-image: url("../my2.png");
padding: 60px;
}

body > nav {
grid-area: nav;
background-color: #d2f5c4;

}

body > #externalLinks {
grid-area: linkBox;
background-color:  #d2f3c6;

}   
body > main {
grid-area: main;
background-color: #eaf6e5;
}

body > #furtherInformation {
grid-area: infoBox;
background-color: #d2f3c6;
}

body > footer {
grid-area: footer;
background-color: #99ee7a;

}

/*导航*/

nav {background-color: #d2f5c4;font-size: 17px;}    
nav a{  
color: black;
text-decoration: none;
margin: 0;
display: inline;
padding: 0px 8px;
font-size: 17px;
font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}

nav ul {list-style-type: none;}   

nav li {display: block;display:inline-block}       

/* 外部链接 */

#externalLinks a    {
text-decoration: none;
display: block;
text-align: center;
padding: 5px ;
font-size: 17px;
font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;  
}

#externalLinks ul {
list-style-type: none;
margin: 5px;
padding: 0;
}

#externalLinks li{float: left}

/* 给出 Link1, link2, link3 ;颜色，填充，.... */

li a, .dropbtn {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;}

.dropdown-content {
display: none; 
position: absolute; 
background-color: #f1f1f1 ;
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 1;                                 
}

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

.dropdown-content a:hover {
background-color: #9f9e9e;
}

/* 打开里面的链接 */

.dropdown:hover .dropdown-content {
display: inline-block;
left: 103px;
top: 214px;
}

/* 页脚 */

#copry {
overflow: auto;
font-size: 2px;
list-style-type: none;
font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}   

#img1 {float: left;margin-bottom: 3px;}
#copry a {text-decoration: none;margin-bottom: 3px;}
#copry p {font-size: 10px;margin-bottom: 0;}

当它看到我的 Firefox 时，它会看到这个，enter image description here ，但是当我在 Chrome 浏览器中看到它时，会看到这个 enter image description here ，我是 html/css 的新手..，我不知道为什么在 Chrome 上出现这个窗口..，请任何人帮助我解决这个问题，谢谢!

Answer 1

我必须找到问题...，在我的 CSS 编解码器中，在 #externalLinks a 中。

#externalLinks a    {

text-decoration: none;
display: block;
text-align: center;
padding: 5px ;
font-size: 17px;
font-family:  Candara, Calibri, Segoe, Optima, sans-serif;

问题是，padding: 5px ;，现在没有它，全是直觉!!