[英]CSS/HTML compatibility issues across the same browser
美好的一天。
我有一个很奇怪的问题。 这是我第一次遇到这个问题。
我有一个html / css菜单(导航菜单),其中包含ul列表和内部的定位标记。 我正在使用边框底部突出显示悬停菜单。
现在发行:我有2台可工作的PC-两个Windows 7,不同版本。 现在使用chrome和firefox,菜单显示正常。 另外,我正在使用仅IE样式表来解决IE中的对齐问题。 看一下Image1,在上述浏览器中查看我的菜单...
现在,在我老板的PC(Windows 8)和一台同事PC以及Windows 8上, 列表项都向下移动-在Chrome中 。 也在IE中(未在FF中测试)-请参见Image2。
为什么CSS可以在我的Chrome浏览器上正常显示,却不能在它们的浏览器上正常显示。 页面上的其他所有内容在浏览器之间都可以正常显示。
请参阅我的CSS定义菜单:
/ 菜单的父div的CSS /
#wrapper {
margin: 0 auto;
margin: 20px auto;
text-align: center;
width: 960px;
background: #f5f5f5; /*url('/images/bgMain.png') repeat center;*/
-moz-box-shadow:0 0 5px #999;
-webkit-box-shadow:0 0 5px #999;
box-shadow:0 0 5px #999;
}
#header {
margin: 0 auto;
/*background: url('/images/bg2.png') repeat-x center;*/
background: #eee;
text-align: center;
border-bottom: 6px solid #f3911f;
}
/ **********************这里菜单CSS开始*************** /
#menuNav {
height: 100px;
text-align: center;
margin: 0 auto;
}
#menuNav ul {
list-style: none;
}
#menuNav ul li {
display: inline-block;
height: 100px;
line-height: 178px;
}
#menuNav ul li a {
padding: 0px 15px ;
font-family: 'Myriad Pro', 'Open Sans', Arial, sans-serif;
font-size: 22px;
color: #3c3b3d;
text-transform: uppercase;
border-bottom: 6px solid #f3911f;
text-decoration: none;
}
#menuNav ul li a.menuSmaller {
font-size: 18px;
padding-bottom: 2px;
}
#menuNav ul li a:hover {
border-bottom: 6px solid #7f2218;
}
#menuNav ul li a:focus {
border-bottom: 6px solid #7f2218;
}
/*LOGIN*/
#menuNav ul li#login, #menuNav ul li#logout{
float: right;
margin: 0px;
}
#menuNav ul li#login a, #menuNav ul li#logout a {
color: #7f2218;
}
/*Show hover effect on selected/active menu*/
.activeMenu {
border-bottom: 6px solid #7f2218 !important;
}
HTML:
<div id="wrapper" class="row-fluid">
<div id="header" class="row-fluid">
<div id="logo" class="span2">
<div><a href="Home.aspx" title="Card Vault logo"><img src="images/logo.png" alt="CardVault Logo" /></a></div>
</div>
<div id="menuNav" class="span10">
<ul>
<li id="menuSignUp"><a href="SignUp.aspx">Sign Up</a></li>
<li id="menuPricing"><a href="Pricing.aspx">Pricing</a></li>
<li id="menuCorporate"><a href="Corporate.aspx">Corporate</a></li>
<li id="menuAbout"><a href="About.aspx">About</a></li>
<li id="menuPartners"><a href="Partners.aspx">Partners</a></li>
<li id="login"><a href="login.aspx">Login</a></li>
</ul>
</div>
</div>
</div>
注意:我正在使用twitter bootstrap作为主要布局,但是我不认为这会引起任何问题,这是前所未有的...
此外,我们都有最新的Chrome版本...
谢谢!
我唯一看到过这种情况的发生是在不同的操作系统之间。 在这种情况下,它只能在Windows和Linux上运行,而不能在Mac上运行。 各种情况之间唯一的共同特征是呈现的菜单字体看起来有所不同。 而且,是的,这也让我有些头疼。
您可能还想通过执行CTRL-0
来重置页面缩放,以防万一有人放大而搞砸了。
起作用的是调整菜单项的填充,直到正确显示一个不正确的菜单项并同时覆盖了两个菜单项。 不幸的是,由于所讨论的系统无法访问开发服务器,因此只能通过反复试验来做到这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.