Question

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

该网站是使用WP-Forge framework的WordPress网站，http://www.josephruscitti.com/clients/vazzo/本身基于Foundation。

网站链接：{{3}}

我的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 ...祝你好运

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

1 个答案: