Internet Explorer 边距错误，其他都好

发布于 2024-12-26 02:46:29 字数 3143 浏览 1 评论 0原文

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

感谢您的帮助。

原文

I got a tiny problem. First time I am doing a UL menu with an arrow poping on the right... without JS.

I got a small problem. In Internet Explorer... IE show a margin in #subMenu ul li of arround 2px (so we see the page background). In other broswer everything is fine.

Also, I am suppose to the see the PNG on the right of the UL. If UL is 0px-100px left then the pic will appear at 100px-122px left. IE doesnt show the pic, other does.

Good : FF 9.0.1, Safari 5.1.2, Opera 11.60, Chrome 16.0.912.75
Wrong : IE 9.0.4

I did try this but... border goes wrong with this :

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

Here's picture of what I mean : http://i44.tinypic.com/6poy8i.jpg
Here's the test page :

<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>

Thanks for you help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

獨角戲 2025-01-02 02:46:30

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

示例：

<!doctype html>

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

You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model, among other things.

Example: