服务器之间的 CSS 边距差异

Question

我有一个开发服务器和一个生产服务器来托管我的网站。我发现 html 在这些服务器上的呈现方式存在差异，但仅限于 Internet Explorer。

我正在呈现标签列表。这是标记。

<div class="tag">
    <ul>
        <li><a href="#">tag1</a></li>
        <li><a href="#">tag2</a></li>
        <li><a href="#">tag3</a></li>
    </ul>
</div>

这是css。

.tag
{

}

.tag ul
{
    margin-top: 5px;
    padding-left: 5px;
}

.tag li
{
    display:block;
    float:left;
    margin: 1px 1px 1px 0px;
}

.tag a
{
    color: white;
    font-weight: bold;
    text-decoration: none;
}

场景：

1. 当我在任何非服务器机器上的 IE8 中查看此页面时，标签 div 会添加大约 50 像素的左边距或内边距。

2. 当我在 Windows Server 2008 机器上以 IE8 物理查看此页面时，标签 div 正确显示边距和填充

3. 当我在本地开发服务器的 IE8 中查看此页面时，标签 div 正确显示边距和填充。

4. 在我的开发服务器和生产服务器上托管的 Google Chrome 和 Firefox 中查看此页面时，标签 div 正确显示了边距和填充。

这告诉我我有一个非常特殊的情况，即添加了边距/填充。我的页面上似乎没有任何 Javascript 错误，我什至通过 W3C 验证了我的页面以检查标记问题。

使用 IE 开发工具，我可以看到的 div 元素在它工作和不工作的情况下的唯一区别是，当它不工作时，div 如下所示：

<div class="tag" sizcache="0" sizset="2">

区别在于 sizcache 和 sizset 属性。我尝试在开发人员工具中取消这两个属性，但它并没有改变最终结果。它们可能在那里，因为我做了一些 jQuery 标记样式：

$('.tag ul').buttonset();

取出这个 jquery 代码不会改变最终结果。使用开发工具，我什至取消了所有样式（甚至主体继承样式），但我仍然得到边距/填充。

Answer 1

在 IE8 中，UL 默认使用左边距来缩进。要删除它，请将以下内容添加到您的 .tag ul：

margin-left: 0px;

Answer 2

在 IE8 中，我会检查几件事。该问题可能与您的浏览器处于 IE7 兼容模式有关。这可能是您通过工具栏或server can enforce this 通过设置如下 HTTP 标头自行更改的设置：

X-UA-Compatible "IE=EmulateIE7"

微软有更多关于Compatibility View的信息。