0

我的问题是我的网站上有这些按钮项目 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>
4

3 回答 3

1

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

您还没有清除浮动<li>元素，这就是为什么您的容器 div 没有高度的原因.. 浮动元素被从流中取出并被忽略，除非它们后面跟着一个clear设置了属性的元素..

还 可以考虑验证您的页面- 但我认为上述两个问题导致了您所说的问题。你真的需要学习好的 CSS 实践..

于 2013-03-11T19:33:48.300 回答
1

首先是您的 html 上缺少 ul 结束标记。

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

这是 CSS 工具上的链接：重置 CSS

于 2013-03-11T19:29:50.487 回答
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 页面与我联系。

于 2013-03-11T19:58:08.620 回答