Question

我正在为固定宽度的网站制作任务栏。它将链接设置为内联块列表。它的大小都是像素大小，非常适合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。由于某种原因，小提琴上的颜色有些混乱，但是“杂项”。进入下一个像IE10一样的行为。

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

Answer 1

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

这让我，我和其他人手上的情况。首先，我们是否应该继续让我们的导航更灵活，或者我们更确定实际宽度？

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

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

以这种方式思考，您在CSS中定义了3个字体系列。如果平台没有第一个，则转到第二个，然后是第三个，然后是默认平台字体。在那种情况下你的导航是什么样的？每种字体都有自己的大小调整，字距调整等。所以要掌握你的域名，我认为在这里胜出。

IE 10将像素添加到内联块列表中

1 个答案: