0

固定幅サイトのタスクバーを作成しています。インライン ブロックのリストとして設定されたリンクがあります。サイズはすべてピクセル単位で、FF、Opera、Safari、および Chrome に完全に適合します。IE10 では、最後のリンクを新しい行に配置します。

数ピクセル短くすると、IE10 は見栄えがよくなりますが、他の 4 つのブラウザーは Web サイトの幅のすぐ手前で停止します。IEがどこかにピクセルを追加していると思いますが、それらを取り除く方法がわかりません。

HTMLは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <div id="header">
        <div class="fixed">
        <ul>
            <li class="taskbar" id="first"><a href="index.php">ALL</a>
            </li><li class="taskbar"><a href="index.php">GEOGRAPHY</a>
            </li><li class="taskbar"><a href="index.php">SCIENCE</a>
            </li><li class="taskbar"><a href="index.php">ARTS</a>
            </li><li class="taskbar"><a href="index.php">HISTORY</a>
            </li><li class="taskbar"><a href="index.php">SPORTS</a>
            </li><li class="taskbar" id="last"><a href="index.php">MISC.</a></li>
        </ul>
        </div>
    </div>
</body>
</html>

今CSS：

html {
height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Older Browsers */
    background: -prefix-linear-gradient(top, #FFFFFF, #FFEE88 72px, #FFFFFF);
    /* IE10 */
    background-image: -ms-linear-gradient(top, #FFFFFF, #FFEE88 72px, #FFFFFF);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF, #FFEE88 72px, #FFFFFF);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF, 0%, #FFEE88 72px, #FFFFFF);
    /* Webkit (Safari/Chrome) */
    background: -webkit-linear-gradient(top, #FFFFFF, #FFEE88 72px, #FFFFFF);
    /* Proposed W3C Markup */
    background-image: linear-gradient(top, #FFFFFF 0%, #FFEE88 72px, #FFFFFF 100%);
    /*background: linear-gradient(to bottom, #FFFFFF, #FFEE88 72px, #FFFFFF);*/
}

/* fixed width main body div */
.fixed {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#header {
    width: 100%;
    background-color: #FFEE66;
}
.fixed ul {
    margin: 0;
    padding: 0;
}
.taskbar {
    display: inline-block;
}
.taskbar:hover {
    background-color: #FFFF99;
}
.taskbar a {
    padding: 0px 40px 0px 20px;
    background-image: url("images/taskbar_arrow.png");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: 95% 50%;
    margin: 0;
    border-right: 2px solid #FFCC55;
    text-decoration: none;
    color: black;
    font-size: 24px;
    font-family: Tahoma, Geneva, sans-serif;
}
#first a {
    border-left: 2px solid #FFCC55;
    padding-left: 19px;
}

これが要求された Fiddle で、CSS を正規化しました。何らかの理由で Fiddle の色が少し乱れていますが、「Misc.」IE10 のように次の動作に進みます。

http://jsfiddle.net/2aa5n/3/

4

1 に答える 1

0

私はこれを数回見ました。はっきりとした答えは今のところありませんが、推測はできます。ナビゲーション要素の実際の幅の値を定義していないため、テキストの実際のレンダリング サイズが影響します。IE は Windows にネイティブであるため、グラフィックス/True Type フォント システムをより活用し、より正確なフォントをレンダリングすると思います。このため、IE でフォントがくっきりしている場所を読んだことがあると思います。

それはあなた、私、そして他の人たちの手にかかっています。まず、このようにナビゲーションをより柔軟なままにしておくべきでしょうか、それとも実際の幅をもっと定義するべきでしょうか?

これはIEに分離されていますか？おそらくそうではありませんが、他のプラットフォームでも同様の問題が見つかると思います。MAC、iOS、Linux など

私は実際に幅を自分で定義することを選択したと思います。より安全な賭けだと思います。

このように考えてみてください。CSS で 3 つのフォント ファミリが定義されています。プラットフォームに最初のフォントがない場合は、2 番目、次に 3 番目、次にデフォルトのプラットフォーム フォントに移動します。その状況であなたはどのように見えますか？各フォントには、独自のサイジング、カーニングなどがあります。そのため、ドメインのマスターになることがここで勝つと思います.

于 2013-10-26T18:44:47.950 に答える