请看代码和图示，为什么在IE中显示右侧标题(h6)要高出一块？

学习study 2012-09-11 06:16:26

请看下面代码似乎左侧left 影响了info块在IE中的显示，标题背景多出了一部分，和left块标题不一样，不知问题出在哪里？请指教。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>排版</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body,div,ul,li{margin:0;padding:0;}
#top
{
margin:5px auto;
width:700px;
text-align:left;
}
#left
{
float:left;
width:348px;
border:1px solid #BFD5A9;
}
#left h6
{
color:#ffffff;
background:#090;
padding:5px;
font-size:14px;
margin:0;
}
#intro {overflow:hidden;zoom:1;padding-top:5px;padding-bottom:3px;font-size:14px;color:#333}
#intro img{display:block; float:left;margin-left:2px;margin-right:5px;}
#intro p{text-indent:2em;}

#info
{
float:left;
width:344px;
border:1px solid #BFD5A9;
margin-left:4px;
}
#info h6
{
background:#090;
color:#ffffff;
padding:5px;
font-size:14px;margin: 0;
}
#info h6 span
{
float:right;
font-size:12px;
color:#ffffff;
font-weight:normal
}
#info h6 a
{
color:#ffffff;
}
#info ul li
{

font-size:12px;
line-height:22px;
height:22px;
overflow:hidden;
}
#info li a:link,#infoli a:visited
{
color:#163F8F;
}

</style>
</head>
<body>
<div id="top">
<div id="left">
<h6>成果说明</h6>
<div id="intro">成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果说明成果

说明成果说明成果说明成果说明成果说明成果说明<a href="#">[详细]<a></p></div>
</div>

<div id="info">
<h6><span><a href="#">more...</a></span><a href="#">常用下载信息</a></h6>
<ul>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
<li><span style='float:right;'>2011</span>·<a href='#' target='_blank'>说明书说明书说明书</a></li>
</ul>
</div>
</div>

</body>
</html>

不知问题出在哪里，请指出？

另外：一个div的宽度是指内容宽度+border宽+padding宽+margin宽吗？
还是仅仅指内容的宽度？

...全文

65 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

wsn2988 2012-09-11

打赏
举报

说明成果说明成果说明成果说明成果说明成果说明<a href="#">[详细]</a></p></div>

亿图图示是一个简单易用的图形表达工作台，既能实现流程图、架构图、工程图、思维导图等数百种专业领域图形图表的绘制，又能提供一个白板进行头脑风暴和任意编排，轻松实现数据和创意的可视化呈现。支持Windows、Mac...

第一步：规划网站，本教程将以图示为例构建网站；第二步：创建HTML模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的...

特点: 1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙 3）高度、行高、外边距以及内边距都可以控制 2）默认宽度就是它本身内容的宽度显示模式转换 1）块转行内：display:inline; 2）行内转块：display:...

1、父元素和子元素宽高不固定，如何实现水平垂直居中第一种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

一、1、Html和CSS的关系 ...下面我们就来了解下这三门技术都是用来实现什么的： ...内容就是网页制作者放在页面上想要让用户浏览的信息...比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容

CSS

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章