0

良い一日。

私はかなり奇妙な問題を抱えています。そして、これに出くわしたのは初めてです。

ulリストとアンカータグで構成されるhtml/cssメニュー（ナビゲーションメニュー）があります。ホバーでメニューを強調表示するためにborder-bottomを使用しています...

今の問題：私は2台のPCを使用しています-両方のWindows 7、異なるエディション。今クロームとファイアフォックスで、メニューはうまく表示されます。また、IEのみのスタイルシートを使用して、IEの配置の問題を修正しています。Image1を見て、上記のブラウザで私のメニューを確認してください...

現在、私の雇用主のPC（Windows 8）と同僚のPCの1つであるWindows 8では、リスト項目が下にシフトされています-Chromeでは。IEでも（FFではテストしませんでした）-Image2を参照してください。

Chromeブラウザでは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ブートストラップを使用していますが、これが問題を引き起こす可能性はないと思います。これまでにないことです...

また、私たちは両方とも最新のChromeバージョンを持っています...

Image1-Chromeブラウザで正常に表示される

Image2-相手のChromeでどのように表示されるか

ありがとうございました！

4

1 に答える 1

1

私がこれを目にしたのは、異なるオペレーティングシステム間だけでした。その場合、WindowsとLinuxで動作しましたが、Macでは動作しませんでした。さまざまなオカレンスに共通する唯一の特徴は、レンダリングされたメニューフォントが異なって見えることでした。そして、はい、それは私にもいくつかの頭痛の種を引き起こします。

CTRL-0また、誰かがズームインして物事を台無しにした場合に備えて、ページズームをリセットすることもできます。

うまくいったのは、間違ったものが正しく表示され、両方に到達するまで、メニュー項目のパディングを調整することでした。残念ながら、問題のシステムは開発サーバーにアクセスできなかったため、試行錯誤でしかそれを行うことができませんでした。

于 2013-03-03T02:17:04.287 に答える