Кроссбраузерность в internet explorer/edge
Есть меню, которое выровнено по вертикали и горизонтали, делал в chrome, все отображается как надо, но в internet explorer и edge это меню сдвигается по вертикали на 1px вниз, в чём проблема?
.section {
margin: 0 auto;
width: 100%;
height: 70px;
background-color: #aeaeae;
text-align: center;
}
ul {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
ul li {
display: inline-block;
margin-right: -4px;
}
ul a {
text-decoration: none;
color: black;
padding: 27px 25px;
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="section">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Abou us</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Products</a></li>
<li><a href="">Maps</a></li>
</ul>
</div>
</body>
</html>Так выглядит в chrome
internet explorer/edge