1

所以我有一个在 Firefox 和 chrome 中正确显示的垂直菜单。但是，它在 Opera 中显示为水平的。我真的认为这只是代码中的一个简单调整，但我似乎无法缩小范围！

#liststyle2 {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border: 1px solid #c7c7c7;
    background-color: #ececec;
    float: left;
    text-decoration: none;
    list-style-type: none;
    list-style: none;
    display: block;
    margin: 20px 0 0 0;
}

#liststyle2 li {
    text-decoration: none;
    position: relative;
}

#liststyle2 li a {
    padding: 17px 25px 15px 25px;
    font-size: 15px;
    float: left;
    min-width: 77px;
    text-decoration: none;
    text-align: center;
    display: block;
    font-weight: bold;
    color: #a3a3a3;
    border-bottom: 1px solid #c7c7c7;
    text-decoration: none;
}

#liststyle2 li a:hover{
    background-color: #e2e1e1;
}

#liststyle2 li:last-child a{
    border-bottom: none;
}
4

2 回答 2

1

如果我有 html 代码会更好。

我认为您应该删除此选项：

#liststyle2 li a {
    float: left;
}

如果您必须将这些浮动li a到左侧。您必须将#liststyle2 li a宽度设置为等于的宽度#liststyle2。

于 2013-02-18T06:09:48.353 回答
0

对于每个浏览器的引擎，需要不同的转换前缀。也添加以下内容：

-o-border-top-left-radius: 5px;
-o-border-top-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-o-border-bottom-left-radius: 5px;

在你的#liststyle2.

阅读更多关于Opera的文档。

于 2013-02-18T06:04:59.627 回答