jquery - 服务器之间的 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 代码取出并不会改变最终结果。使用开发工具，我什至取消了所有样式(甚至是 body 继承的样式)，但我仍然得到边距/填充。

Answer 1

在 IE8 中，UL 默认带有左边距，以缩进它们。要删除它，请将以下内容添加到您的 .tag ul:

margin-left: 0px;