Internet Explorer 错误边距，其他不错答案

【问题标题】：Internet Explorer wrong margin, Others goodInternet Explorer 错误边距，其他不错
【发布时间】：2012-01-11 23:22:50
【问题描述】：

我遇到了一个小问题。我第一次做一个 UL 菜单，右边弹出一个箭头......没有 JS。

我遇到了一个小问题。在 Internet Explorer 中... IE 在 #subMenu ul li 中显示一个 2px 左右的边距（因此我们可以看到页面背景）。在其他浏览器中一切都很好。

另外，我想看看 UL 右侧的 PNG。如果 UL 是 0px-100px 左边那么图片将出现在 100px-122px 左边。 IE不显示图片，其他的。

好：FF 9.0.1、Safari 5.1.2、Opera 11.60、Chrome 16.0.912.75 错误：IE 9.0.4

我确实尝试过，但是...边框出了问题：

#subMenu ul li{
    list-style-type: none;
    margin: -2px;
}

这是我的意思的图片：http://i44.tinypic.com/6poy8i.jpg 这是测试页面：

<html>
    <head>

        <style>
        html, body{
            margin: 0px;
            padding: 0px;
            font-family: Arial;
            font-size: 12px;
        }

        #wrapper{
        }

        #subMenu{
            padding: 5px;
        }

        #subMenu .wrapMenu{
            width: 180px;
        }

        #subMenu ul{
            list-style-type: none;
            width: 100%;
            padding: 0px;
            margin: 0px;
            height: auto;
        }

        #subMenu ul li{
            list-style-type: none;
            margin: 0px;
        }

        #subMenu ul li:hover{
            width: 100%;
        }

        #subMenu ul li a,
        #subMenu ul li a:link,
        #subMenu ul li a:visited{
            text-decoration: none;
            color: #b9b9b9;
            display: block;
            background-color: #f5f5f5;
            border-left: 1px solid #c3c3c3;
            border-bottom: 1px solid #c3c3c3;
            border-right: 1px solid #c3c3c3;
            width: 100%;
            height: 48px; /* padding-top + padding-bot + height de ul li span*/
        }

        /*f9f9f9*/
        #subMenu ul li a:hover{
            color: #7a7a7a;
            border-right: 0px;
            background-color: #f9f9f9;
        }

        #subMenu ul li span{
            width: 100%;
            float: left;
            height: 20px;
            display: block;
            padding: 14px 6px 14px 20px;
        }

        #subMenu ul li span:hover{
            background: transparent url('subMenu_Arrow.png') no-repeat 180px 0px;
        }

        #subMenu ul li a.first{
            border-top-left-radius: 3px;
            border-top: 1px solid #c3c3c3;
        }

        #subMenu ul li a.last{
            border-bottom-left-radius: 3px;
        }

        </style>
    </head>

    <body>
        <div id="subMenu">
            <div class="wrapMenu">
                <ul>
                    <li><a class="first" href="#"><span>Arrêts</span></a></li>
                    <li><a href="#"><span>Avis</span></a></li>
                    <li><a href="#"><span>Planibus</span></a></li>
                    <li><a class="last" href="#"><span>Trajets</span></a></li>
                </ul>
            </div>
        </div>

    </body>
</html>

感谢您的帮助。

【问题讨论】：

标签： html css margin

【解决方案1】：

您需要将doctype 指定为标记的第一行。如果没有doctype，IE 将在quirks mode 中渲染，这本质上是 IE 5.5 渲染引擎。 Quirks 模式会极大地影响盒子模型等。

例子：

<!doctype html>

指定doctype 将在您的屏幕截图中产生正确的结果。

【讨论】：

哈哈，你今天教会了我一些东西！太愚蠢了……我从没想过IE会因此而那样做。我应该开始在我的真实页面而不是测试页面中工作。著名的。谢谢！我会在 5 内尽快接受。即使经过 6 年的 web 开发，我们总是学到一些很愚蠢但很重要的东西！
很高兴为您提供帮助！事实证明，这里的很多“WTF IE”问题都可以通过指定doctype 来回答:)