[英]Li tag is not aligning correctly in Chrome. How to fix it?
我正在嘗試創建一個菜單並設置其樣式。 懸停時,我還使用了一些CSS動畫來顯示說明(跨度)。 此菜單在Firefox下正常工作。 但是在Chrome瀏覽器中,菜單上方有空白。 當我通過Firebug檢查li標簽時,它表明li元素未正確對齊。 它向上移動。 它不是發生在Firefox上。 (請查看下面的屏幕截圖)。 我怎樣才能解決這個問題?
更新 :我剛剛將網站上傳到Heroku: http : //aqueous-wildwood-4051.herokuapp.com/ 。 您將在此實時站點中看到該問題。
在chrome中:
在Firefox中 :
這是我的側邊欄的代碼:
<aside id="sidebar" role="complementary">
<nav id="side-nav" role="navigation">
<ul>
<li ><a href="/"><div id='side-nav-home' class='listitem'><span class='listtitle'>Home</span><span class='description'>Home page of SLNYAA</span></div></a></li>
<li ><a href="/about"><div id='side-nav-about' class='listitem'><span class='listtitle'>About Us</span><span class='description'>Learn more about us</span></div></a></li>
<li ><a href="#"><div id='side-nav-handbook' class='listitem'><span class='listtitle'>Handbook</span><span class='description'>Read our handbook</span></div></a></li>
<li ><a href="#"><div id='side-nav-join' class='listitem'><span class='listtitle'>Join Us</span><span class='description'>Join our program</span></div></a></li>
</ul>
</nav>
</aside>
這是CSS:
#sidebar {
border-left: 1px solid #EDEDED;
box-shadow: -3px 0 9px rgba(217, 217, 217, 0.2);
float: right;
min-height: 365px;
width: 24%;
#side-nav{
ul {
margin-top: 0px !important;
height: 187px;
list-style: none outside none;
margin-left: 0;
padding-left: 0;
width: 100%;
li{
height: 46px;
a{
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.listitem {
list-style: none outside none;
height: 32px;
text-align: center;
padding-top: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.description {
visibility: hidden;
position: absolute;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
position: absolute;
margin-left: 8px;
margin-top: 4px;
opacity: 0;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
&:hover {
text-align: left;
.description {
visibility: visible;
opacity: 1;
}
.listtitle{
margin-left: 7px;
border-right: 1px solid #FFFFFF;
padding-right: 7px;
}
}
}
}
}
#side-nav-home{
background-color: #ED0042;
border: 2px solid #E87998;
}
#side-nav-about{
background-color: #e1cf3b;
border: 2px solid #C4BD80;
}
#side-nav-handbook{
background-color: #009dda;
border: 2px solid #5EADCC;
}
#side-nav-join{
background-color: #6ba01e;
border: 2px solid #98AB7D;
}
}
}
}
添加display: block
到a
CSS樣式
#main-container-border #main-container #sidebar #side-nav ul li a {
display: block;
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.