Html IE 10向内联块列表添加像素_Html_Css_Internet Explorer

Html IE 10向内联块列表添加像素

html css internet-explorer

Html IE 10向内联块列表添加像素,html,css,internet-explorer,Html,Css,Internet Explorer,我正在为一个固定宽度的网站制作一个任务栏。它具有设置为内联块列表的链接。它的大小都以像素为单位，与FF、Opera、Safari和Chrome完美搭配。在IE10上，它将最后一个链接放在新行上如果我把它缩短几个像素，IE10看起来会很好，但是其他4个浏览器会在网站宽度不到的地方停止。我想IE在某处添加了像素，但我不知道如何去除它们以下是HTML： <!DOCTYPE html> <html> <head> <meta charset="UTF

我正在为一个固定宽度的网站制作一个任务栏。它具有设置为内联块列表的链接。它的大小都以像素为单位，与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。由于某种原因，小提琴上的颜色有点乱，但“杂项”会像IE10一样转到下一个

我已经看过好几次了。我现在没有确切的答案，但我有一个猜测。您没有为任何导航元素定义实际宽度值，因此文本的实际渲染大小起作用。由于IE是Windows自带的，我认为它更多地利用了图形/true type字体系统，并呈现出更精确的字体。我相信我已经读到了IE中字体更清晰的地方

这就给你、我和其他人留下了一个局面。首先，我们应该继续让我们的导航更灵活，还是定义实际宽度更灵活

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

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

这样考虑一下，在CSS中定义了3个字体族。如果平台没有第一个字体，则转到第二个，然后是第三个，然后是默认的平台字体。在那种情况下你的导航是什么样子的？每种字体都有自己的大小、字距等。因此，我认为，掌握你的领域会在这里胜出。

你能发布一篇文章吗？请使用

reset.css

或

normalize.css

。您使用的是reset css还是normalize.css？是否正在使用

框大小：边框框

属性？将其设置为normalize.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;
}