带display:inline的HTML li标记在IE7中显示为块
我创建了一个带有水平无序列表的导航栏。这在所有浏览器中都可以很好地显示，IE7除外，在IE7中，列表项似乎显示为块元素。下面是HTML输出，包括CSS带display:inline的HTML li标记在IE7中显示为块,html,css,inline,block,html-lists,Html,Css,Inline,Block,Html Lists,我创建了一个带有水平无序列表的导航栏。这在所有浏览器中都可以很好地显示，IE7除外，在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/xh
<!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>
身体
{
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
}
#包装纸
{
宽度：900px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}
#头节
{
顶部：0px；
宽度：900px；
高度：470px；
位置：绝对位置；
}
#龙头
{
高度：130像素；
}
#导航
{
高度：70像素；
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
}
身体
{
颜色：#333333；
字体系列：Tahoma；
字号：0.9em；
}
#导航
{
宽度：600px；
溢出：隐藏；
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
浮动：对；
背景图片：url（“/images/headercastlenav.png”）；
背景重复：无重复；
背景位置x：左；
背景位置y：顶部；
}
#导航UL
{
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
}
#李国荣
{
高度：70像素；
浮动：左；
显示：内联；
}
#已选定的导航UL LI
{
过滤器：α（不透明度=80）；
背景色：rgb（0,51,102）；
}
#海军ulli A
{
高度：70像素；
颜色：#006699；
线高：70px；
填充顶部：0px；
右边填充：10px；
垫底：0px；
左侧填充：10px；
字体系列：Calibri；
字体大小：13px；
文字装饰：无；
浮动：对；
显示：块；
}
#海军ulli A
{
颜色：#fff；
过滤器：α（不透明度=100）；
}
非常感谢您的帮助。问题在于
浮动：对#nav ul li a/*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;
}
谢谢，@ScottSimpson。我注意到您在同一规则中用
float:left；float:right；float:left；