Question

所以我有一个在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;
}

Answer 1

如果我有html代码会更好。

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

#liststyle2 li a {
    float: left;
}

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

Answer 2

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

-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的文档。

垂直菜单在Opera中显示为水平

2 个答案: