html - Internet Explorer 错误边距,其他都不错

标签 html css margin

我遇到了一个小问题。我第一次做一个 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>

谢谢你的帮助。

最佳答案

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

例子:

<!doctype html>

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

关于html - Internet Explorer 错误边距,其他都不错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8821669/

相关文章:

css - 添加 1px 填充会导致外部 div 包含子边距

html - CSS:为什么 "margin-left"和 "width"不工作?

JavaScript:我需要创建有关加法、乘法等矩阵运算的问题。如何在 HTML 页面上显示矩阵?

css - 如何在 xsl 文件中应用 URL 和 Quote 标记的 css 样式?

html - Nested floats clearfix stretches to wrong height 解释

css - 我似乎无法使用 Django 加载我的静态文件

html - CSS 背景不显示 IE 8 及更早版本

jquery - 我如何使这个 jQuery 动画在第二次单击时反转/切换/向后播放?

html - 设置视口(viewport)或优化代码

php - 输入值可以与 HTML 表单中的占位符相同吗?