導航按鈕在不同瀏覽器中不匹配

-1

我無法弄清楚如何在每個瀏覽器中使我的側面導航按鈕長度相匹配。在FF中，這些按鈕看起來與它們旁邊放置的精選圖像的長度相匹配。但在Chrome和IE10中，這些按鈕並沒有完全消失。導航按鈕在不同瀏覽器中不匹配

該網站是一個WordPress站點使用WP-Forge framework，它本身是基於基礎。

網站鏈接：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; 
}

來源

2014-02-07 Joseph

嘿約瑟夫，你會發現，如果你發佈你的代碼不僅僅是一個鏈接，或者在Jfiddle或在這裏，你會得到更好的迴應 – Marriott81

試試這個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 ...祝你好運

來源

2014-02-07 15:18:45 aldanux

導航按鈕在不同瀏覽器中不匹配

回答

相關問題