0

再会。

我有一个相当奇怪的问题。这是我第一次遇到这种情况。

我有一个 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 版本...

Image1 - 在我的 Chrome 浏览器上显示正常

Image2 - 它如何在对方的 Chrome 上显示

谢谢！

4

1 回答 1

1

我见过这种情况的唯一一次是在不同的操作系统之间。在这种情况下，它适用于 Windows 和 Linux，但不适用于 Mac。各种事件之间的唯一共同特征是呈现的菜单字体看起来不同。而且，是的，它也让我有些头疼。

您可能还想通过这样做来重置页面缩放，CTRL-0以防万一有人放大并且搞砸了。

起作用的是调整菜单项的填充，直到不正确的项正确显示并同时达到。不幸的是，我只能通过反复试验来做到这一点，因为相关系统无法访问开发服务器。

于 2013-03-03T02:17:04.287 回答