html - CSS:mozilla 浏览器中的文本位置不正确

Question

我的问题是我的网站上有这些按钮 Item 1、Item 2 等，现在框/按钮元素内的文本位置对于 Chrome 来说是正确的位置，但在 Firefox 上它们显示出一些问题并被放置在上面的某个地方文本未正确显示的框。

有人可以帮助解决 CSS 或其他任何我出错的问题，以便我可以将文本放在框元素内的正确位置。

<div class="contents grid_26 push_24">
            <ul class="ca-menu">
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 1<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>

                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 2<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>

                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">

                        <div class="ca-content lft">
                            <h2 class="ca-main">Item 3<img src="images/image_1.png" width="22" height="22" class="arrow1"></h2>

                        </div>
                    </a>
                </li>
</div>

---

<style>
.ca-main{
font-size: 14px;
position: absolute;
top: -17px;
height: 80px;
width: 120px;
left: 70%;
margin-left: -88px;
opacity: 0.8;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
}

.container_24 .grid_26 {
margin-top: -20px;
}

.container_24 .push_24 {
 margin-left: 0px;
}

.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;

}

.ca-menu{
padding: 0 0 0 48px;
margin: 62px auto;
width: 1020px;
cursor: pointer;
}

.ca-menu li{
top: 28px;
left: -140px;
width: 140px;
height: 28px;
border: 3px solid #333;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-left:-48px;

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
/* -webkit-border-radius: 125px; */
-moz-border-radius: 125px;
border-radius: 125px;
}

</style>

Answer 1

我建议你试试这个:

.ca-menu li a {
    text-align: left;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #333;
    position: relative;
}

但是，要构建菜单，我建议您使用 Superfish。这是创建带有动画和完整浏览器兼容性的精美交互式菜单的最佳方式。

我什至会给你留下链接，让你的事情变得更容易:https://github.com/joeldbirch/superfish/

相信我，这很棒。看看我做了什么:www.santz.net 和 santz.freeiz.com

我使用这个插件开发了两个菜单，它很棒。

希望我有所帮助，如有任何疑问，请通过此处或我的 Facebook 页面与我联系。