IE 7 调试问题 - 第一行神秘 <li> 缩进答案

【问题标题】：IE 7 Debug Issue - mystery <li> indent on first lineIE 7 调试问题 - 第一行神秘 <li> 缩进
【发布时间】：2010-12-29 08:10:54
【问题描述】：

我正在建立一个网站，www.vitaminjdesign.com

在 IE7 中，您会注意到在页脚中，列表项的第一行缩进了一点。有谁知道我需要什么 CSS 修复？谢谢

【问题讨论】：

首先 - IE7 和 Google Chrome 之间有很多不同（字体、大小...）。第二 - 我认为这不是 StackOverflow 的问题。
这与 SO 绝对相关。
这是一个编码问题，与 StackOverflow 完全相关。目前这里有 7,573 个问题标记为 CSS！

标签： html css internet-explorer-7 cross-browser

【解决方案1】：

IE7 有不同的 css 文件。当我在 IE 中加载页面时，我注意到状态栏中有一个警告三角形。它抱怨css_ims 没有在第 55 行，字符 3 中定义。检查 IE 特定文件的语法错误（我的意思是 MS 认为的语法错误）。

【讨论】：

是的，我不知道如何解决这个问题

【解决方案2】：

尝试在您的 LI 元素上设置 list-style-position: outside。把它放在一个条件样式表中，这样它就只能被 IE7 看到。

顺便说一句，整个网站的文案中有很多错别字——如果人们要认真对待你的宣传，你需要清理这些错别字。

【讨论】：

【解决方案3】：

您可以创建一个 IE hack。使用以下内容创建一个新样式表（例如 ie-hacks.css）（使用的示例类，随意使用）：

.ie-hack ul {
margin-left: -5px;
}

您可能需要更改样式中 margin-left 的值。在页脚中，更新以下代码：

<ul id="info" class="ie-hack">

        <li class="header">Vitamin J Design</li>
        <li>a web & graphic design studio</li>
        <li><a href="mailto:info@vitaminjdesign.com">info@vitaminJ.com</a></li>
        <li>(609) 238-4513</li>
    </ul>

    <ul id="rfi" class="ie-hack">

        <li class="header" class="ie-hack">Ready To Get Started?</li>
        <li>Fill out our <a href="rfp.html">Request for Proposal</a> form and tell us a little bit about your proejct</li>
        <li style="margin-top:4px"><a href="cost.html">How Much Will My Site Cost?</a></li>

    </ul>

     <ul id="navigate" class="ie-hack">      
        <li class="header">Navigate</li>

        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="blog">Blog</a></li>
    </ul>

并且，在标记的“head”部分，您需要添加以下内容：

<!--[if IE 7]> <link href="path/to/above/stylesheet.css" rel="stylesheet" type="text/css"> <![endif] -->

【讨论】：

这将移动整个列表，但它不会解决缩进问题。即使我把负边距放在
它不会让步