Question

我的问题是我在我的网站上有这些按钮第1项，第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

首先，你在html上缺少一个ul结束标记。

那么你可能想在我们的风格上添加一个css重置。重置样式表的目的是减少浏览器在默认行高，边距和标题字体大小等方面的不一致性。

表示CSS Tools: Reset CSS

上的链接

Answer 2

每个列表项都有position: relative; left: -140px;，它将140px推到视口左侧（屏幕外），因为没有其他元素设置了位置属性它（在这种情况下它相对于根<html>元素）

你还没有清除浮动的<li>元素，这就是你的容器div没有高度的原因。浮动的元素被从流中取出并被忽略，除非它们后跟一个{{1}的元素在它上面设置属性..

同样 consider validating your page - 但我认为上述两个问题导致了您所说的问题。你真的需要了解好的CSS实践..

Answer 3

我建议你试试这个：

.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页面与我联系。

CSS：文本位置在mozilla浏览器中不正确

3 个答案: