CSS 菜单看起来就像 Opera 中的垃圾
好的，我已经花了几天时间编写我的网站替代应用程序，并在 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;}
ok so I've been working on coding my website Alternative Apps, for a couple days, and I tested it out in Opera, and the menu is higher than what I want it to. Looks fine in FF, and Chrome, but I can't seem to figure out how to fix it for Opera. (Haven't tested it for IE yet)
Can anybody fix the issue for me, or better yet explain to me why it's like this, and how to fix it?
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;}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是您没有文档类型，因此您的页面正在使用Quirks 模式。
将其添加为第一行：
这修复了 Opera 中的菜单，并大大改进了 Internet Explorer 中的整个页面。
始终向新网站添加文档类型，无一例外。
The problem is that you don't have a doctype, so your page is using Quirks Mode.
Add this as the very first line:
This fixes the menu in Opera, and massively improves the entire page in Internet Explorer.
Always add a doctype to new sites, no exceptions.