导航按钮在不同的浏览器中不匹配

Question

我无法弄清楚如何在每个浏览器中进行侧面导航匹配的按钮的长度。在FF中，按钮似乎与它们放置在旁边的特色图像的长度相匹配。但是在Chrome和IE10中，按钮并没有一直向下下降。

该网站是使用WP-Forge框架的WordPress网站，该网站本身基于基础。

网站链接：http：//www.josephruscitti.com/clients/vazzo/

我的CSS

.side-nav{
padding:0;
}
.side-nav li{
background: #6698ff; /* Old browsers */
background: -moz-linear-gradient(top,  #6698ff 0%, #207cca 49%, #527acc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6698ff), color-stop(49%,#207cca), color-stop(100%,#527acc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6698ff 0%,#207cca 49%,#527acc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6698ff 0%,#207cca 49%,#527acc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6698ff 0%,#207cca 49%,#527acc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6698ff 0%,#207cca 49%,#527acc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698ff', endColorstr='#527acc',GradientType=0 ); /* IE6-9 */
margin:0;
}
.side-nav li a{
color:#FFF;
font-size:1.4em;
font-weight:bold;
padding:24.5px 10px;
text-indent:10px;
}

Answer 1

尝试此CSS：

.side-nav li {
    margin: 0px 0px 0.4375rem;
    font-size: 0.84rem; /* <- CHANGE THIS */
}

并将高度放在导航盒中：

.side-nav li a {
    color: rgb(255, 255, 255);
    font-size: 1.4em;
    font-weight: bold;
    text-indent: 10px;
    height: 63px;     /* ADD HEIGHT */
    padding: 24px 10px; /* CHANGE PADDING */
}

在Chrome和ff上工作...祝您好运