我有一个开发服务器和一个生产服务器来托管我的网站。我发现这些服务器上 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;
}
场景:
当我在任何非服务器计算机上的 IE8 中查看此页面时,标记 div 添加了大约 50 像素的左边距或填充。
当我在 Windows Server 2008 计算机上的 IE8 中实际查看此页面时,标签 div 正确显示边距和填充
当我在本地开发服务器上的 IE8 中查看此页面时,标签 div 正确显示边距和填充。
在我的开发服务器和生产服务器上托管的 Google Chrome 和 Firefox 中查看此页面,标签 div 正确显示边距和填充。
这告诉我,我有一个非常具体的情况,即添加了边距/填充。我的页面上似乎没有任何 Javascript 错误,我什至通过 W3C 验证了我的页面以检查标记问题。
使用 IE 开发工具,我可以看到 div 元素在起作用和不起作用的情况下的唯一区别是 div 不起作用时如下所示:
<div class="tag" sizcache="0" sizset="2">
区别在于 sizcache 和 sizset 属性。我尝试在开发人员工具中取消这两个属性,但它并没有改变最终结果。它们可能在那里,因为我对标签做了一些 jQuery 样式设置:
$('.tag ul').buttonset();
取出这段 jquery 代码并不会改变最终结果。使用开发工具,我什至取消了所有样式(甚至是主体继承的样式),但我仍然得到了边距/填充。
最佳答案
在 IE8 中,UL 默认带有左边距,以缩进。要删除它,请将以下内容添加到您的 .tag ul
中:
margin-left: 0px;
关于jquery - 服务器之间的 CSS 边距差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3408165/