0

我正在为固定宽度的站点制作任务栏。它具有设置为内联块列表的链接。它的大小都以像素为单位，非常适合 FF、Opera、Safari 和 Chrome。在 IE10 上，它会将最后一个链接放在新行上。

如果我将它缩短几个像素，IE10 会看起来不错，但其他 4 个浏览器将停止在网站宽度附近。我认为 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;
}

这是请求的小提琴，我对 CSS 进行了规范化。出于某种原因，Fiddle 上的颜色有点乱，但是“Misc”。进入下一个像 IE10 一样的行为。

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

4

1 回答 1

0

我已经看过几次了。我现在没有一个可靠的答案，但我有一个猜测。您没有为任何导航元素定义实际宽度值，因此文本的实际呈现大小开始发挥作用。由于 IE 是 Windows 原生的，我认为它利用了更多的图形/真实类型字体系统并呈现更准确的字体。因此，我相信我已经阅读了 IE 中字体更清晰的地方。

这让你、我和其他人陷入困境。首先，我们应该继续让我们的导航像这样更灵活，还是我们更多地定义实际宽度？

这是否与 IE 隔离？可能不会，我打赌你会在其他平台上发现类似的问题；MAC、iOS、Linux等

我瘦了，我选择自己实际定义宽度。我认为这是一个更安全的赌注。

这样想，你的 CSS 中定义了 3 个字体系列。如果平台没有第一个它转到第二个，然后是第三个，然后是默认平台字体。在这种情况下，您的导航是什么样的？每种字体都有自己的大小、字距调整等。因此，我认为成为您的领域的主人会胜出。

于 2013-10-26T18:44:47.950 回答