带有 display:inline 的 HTML li 标签在 IE7 中显示为块

发布于 2024-12-28 18:07:38 字数 4098 浏览 3 评论 0原文

我创建了一个带有水平无序列表的导航栏。这在所有浏览器中都显示良好，但在 IE7 中，列表项似乎显示为块元素。这是 HTML 输出，包括 CSS。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        BODY
        {
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #wrapper
        {
            width: 900px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }
        #headersection
        {
            top: 0px;
            width: 900px;
            height: 470px;
            position: absolute;
        }
        #headertop
        {
            height: 130px;
        }
        #nav
        {
            height: 70px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        BODY
        {
            color: #333333;
            font-family: Tahoma;
            font-size: 0.9em;
        }
        #nav
        {
            width: 600px;
            overflow: hidden;
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            float: right;
            background-image: url("/images/headercastlenav.png");
            background-repeat: no-repeat;
            background-position-x: left;
            background-position-y: top;
        }
        #nav UL
        {
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #nav UL LI
        {
            height: 70px;
            float: left;
            display: inline;
        }
        #nav UL LI.selected
        {
            filter: alpha(opacity=80);
            background-color: rgb(0, 51, 102);
        }
        #nav UL LI A
        {
            height: 70px;
            color: #006699;
            line-height: 70px;
            padding-top: 0px;
            padding-right: 10px;
            padding-bottom: 0px;
            padding-left: 10px;
            font-family: Calibri;
            font-size: 13px;
            text-decoration: none;
            float: right;
            display: block;
        }
        #nav UL LI A.selected
        {
            color: #fff;
            filter: alpha(opacity=100);
        }
    </style>
</head>
<body onload="">
    <form id="form1" action="" method="post" _events="[object Object]">
    <div id="wrapper">
        <div id="headersection">
            <div id="headertop">
                <div id="nav">
                    <ul>
                        <li class="selected"><a class="selected" href="/home">home</a> </li>
                        <li><a href="/How-we-help/Our-services">how we help</a> </li>
                        <li><a href="/How-can-you-help/Befriending/Become-a-volunteer-befriender">how can you help</a> </li>
                        <li><a href="/Funders/Our-funders">funders</a> </li>
                        <li><a href="/News-and-Events">news &amp; events</a> </li>
                        <li><a href="/Contact-us">contact us</a> </li>
                        <li><a href="/How-can-you-help/Donating-and-fundraising">donate</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

非常感谢任何帮助。

原文

I have created a navigation bar with a horizontal unordered list. This displays fine in all browsers except in IE7 where the list items seem to be displaying as block elements. Here is the HTML output, including the CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        BODY
        {
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #wrapper
        {
            width: 900px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }
        #headersection
        {
            top: 0px;
            width: 900px;
            height: 470px;
            position: absolute;
        }
        #headertop
        {
            height: 130px;
        }
        #nav
        {
            height: 70px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        BODY
        {
            color: #333333;
            font-family: Tahoma;
            font-size: 0.9em;
        }
        #nav
        {
            width: 600px;
            overflow: hidden;
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            float: right;
            background-image: url("/images/headercastlenav.png");
            background-repeat: no-repeat;
            background-position-x: left;
            background-position-y: top;
        }
        #nav UL
        {
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #nav UL LI
        {
            height: 70px;
            float: left;
            display: inline;
        }
        #nav UL LI.selected
        {
            filter: alpha(opacity=80);
            background-color: rgb(0, 51, 102);
        }
        #nav UL LI A
        {
            height: 70px;
            color: #006699;
            line-height: 70px;
            padding-top: 0px;
            padding-right: 10px;
            padding-bottom: 0px;
            padding-left: 10px;
            font-family: Calibri;
            font-size: 13px;
            text-decoration: none;
            float: right;
            display: block;
        }
        #nav UL LI A.selected
        {
            color: #fff;
            filter: alpha(opacity=100);
        }
    </style>
</head>
<body onload="">
    <form id="form1" action="" method="post" _events="[object Object]">
    <div id="wrapper">
        <div id="headersection">
            <div id="headertop">
                <div id="nav">
                    <ul>
                        <li class="selected"><a class="selected" href="/home">home</a> </li>
                        <li><a href="/How-we-help/Our-services">how we help</a> </li>
                        <li><a href="/How-can-you-help/Befriending/Become-a-volunteer-befriender">how can you help</a> </li>
                        <li><a href="/Funders/Our-funders">funders</a> </li>
                        <li><a href="/News-and-Events">news & events</a> </li>
                        <li><a href="/Contact-us">contact us</a> </li>
                        <li><a href="/How-can-you-help/Donating-and-fundraising">donate</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Any help is really appreciated.

分享到QQ

分享到微博

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

发布评论

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

探春 2025-01-04 18:07:38

问题在于 #nav ul li a 选择器中的 float: right; 属性。将其删除即可工作。我在 jsFiddle 中尝试了 IE9 和 IE7 兼容。

更新
为了清楚起见，我注释掉了导致问题的声明（即 /* float: left; */。删除 float:left; 声明，您就可以就可以走了。

    #nav UL LI A
    {
        height: 70px;
        color: #006699;
        line-height: 70px;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        font-family: Calibri;
        font-size: 13px;
        text-decoration: none;
        /* float: left; */
        display: block;
    }

The problem is the float: right; property in the #nav ul li a selector. Remove it and it will work. I tried it in jsFiddle with IE9 in IE7 compatibility.

UPDATE
I commented out the declaration that is causing the issue for the sake of clarity (ie. /* float: left; */. Remove the float:left; declaration and you'll be good to go.

    #nav UL LI A
    {
        height: 70px;
        color: #006699;
        line-height: 70px;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        font-family: Calibri;
        font-size: 13px;
        text-decoration: none;
        /* float: left; */
        display: block;
    }

回复收藏 0 原文

~没有更多了~