ブロック要素でパディングを使用すると、Firefox のみ (22.0) で問題が発生します。下部のパディングは上部のパディングとは異なりますが、両方のパディングは css で同じです。
#navigation が要素コンテナーである CSS:
nav#navigation {
position: relative;
margin: 0 0 25px;
padding: 0;
background-color: #2f2f2f;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav#navigation ul.menu {
float: left;
position: relative;
list-style: none;
margin: 0;
}
nav#navigation a.my-element {
float: left;
display: block;
padding: 6px 15px;
line-height: 1;
vertical-align: middle;
font-size: 17px;
font-weight: 300;
text-decoration: none;
background: #ff8833;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
nav#navigation a.my-element span {
display: block;
padding-left: 20px;
background: url("assets/img/icon-plus.png") no-repeat left center;
}
HTML:
<nav id="navigation" class="clearfix" role="navigation">
<ul class="sf-menu menu">
<li><a href="#">list element</a></li>
<li><a href="#">list element</a></li>
<li><a href="#">list element</a></li>
</ul>
<a href="#" class="my-element"><span>Some Text</span></a>
</nav>
これがスクリーンショットです: http://postimg.org/image/wzypkwu2l/
そのための修正はありますか?ありがとう