Question

好的，所以我一直在编写我的网站Alternative Apps的编码，这几天，我在Opera中进行了测试，菜单比我想要的要高。在FF和Chrome中看起来很好，但我似乎无法弄清楚如何为Opera修复它。（还没有为IE测试过它）

任何人都可以为我解决这个问题，或者更好地向我解释为什么会这样，以及如何解决它？

div#topnav {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:25px;
    background-image:-webkit-linear-gradient(#00fcff, #000);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00fcff), to(#000));
    background-image:-moz-linear-gradient(#00fcff, #000);
    background-image:-o-linear-gradient(#00fcff, #000);
    font-family:Arial;
    font-size:12px;
    color:silver;
    text-align:right;
    z-index:1000;
    box-shadow:0px 0px 16px #000;
    text-shadow:0px 0px 2px #000;}

div#topnav button {
    cursor:pointer;
    font-family:Arial;
    font-size:12px;
    color:silver;
    text-decoration:none;
    border:0px;
    height:25px;
    background-color:transparent;
    text-shadow:0px 0px 2px #000;
    transition:all 250ms ease-in-out;
    -webkit-transition:all 250ms ease-in-out;
    -moz-transition:all 250ms ease-in-out;
    -o-transition:all 250ms ease-in-out;
    -ms-transition:all 250ms ease-in-out;}

div#topnav button:hover {
    color:#fff;
    background-color:rgba(0, 0, 0, 0.2);}

div#topnav button:active {
    background-color:rgba(0, 0, 0, 0.5);}

ul#menu {
    list-style:none;}

ul#menu li {
    display:block;
    float:right;
    margin-top:-14px;
    padding-right:10px;
    cursor:pointer;}

Answer 1

问题是您没有doctype，因此您的网页正在使用Quirks Mode。

将其添加为第一行：

<!DOCTYPE html>

这修复了Opera中的菜单，大量改进了Internet Explorer中的整个页面。

始终向新网站添加文档类型，没有例外。

CSS菜单看起来像歌剧中的垃圾

1 个答案: