IE6怎么让元素脱离文档流

haorenge 2014-05-27 01:24:35

代码如下.



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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css">

*{padding: 0;margin: 0}

li{list-style: none;vertical-align: top;}

a{text-decoration: none;color: #424542;}

.box{

	width: 230px;

	height: 34px;

	margin: 30px auto;

	background: #F7F7F7;

	border-bottom: 1px solid #DEDFE7;

	border-top: 1px solid #F7F3F7;

}

.left{

	float: left;

	font-size: 16px;

	line-height: 16px;

	border-left: 2px solid #399E08;

	margin-top: 9px;

	padding-left: 10px;

	color: #424542;

	font-family:'微软雅黑';

}

.box ul{

	padding-top: 11px;

	float: right;

}

.box li{

	float: left;

	width: 33px;

	height: 22px;

	border: 1px solid #DEDBDE;

	border-bottom: none;

	font-family: '微软雅黑';

	font-size: 12px;

	margin-left:4px;

	line-height: 22px;

	text-align: center;	



}

.box a{

	display: block;

	width: 33px;



}

.box a:hover{

	background: #fff;

	height: 23px;

}

</style>



<body>

	<div class="box">

		<p class="left">热搜榜</p>

		<ul>

			<li><a href="">全部</a></li>

			<li><a href="">大陆</a></li>

			<li><a href="">港台</a></li>

			<li><a href="">欧美</a></li>

		</ul>

	</div>

</body>

</html>

就IE6 解决不了求高手指点最好能讲一下原因谢谢了.

想要实现这样的.

...全文

89 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

haorenge 2014-05-27

打赏
举报

引用 1 楼 xuzuning 的回复:

没有问题呀！检查一下是否是 BOM 头的影响

有问题啊. 那个 hover状态在IE6下撑开了下面的那条边框线啊其他就不会啊

xuzuning 2014-05-27

打赏
举报

没有问题呀！检查一下是否是 BOM 头的影响

人生难得一只鸡 2014-05-27

打赏
举报

IE6下子级会撑开父级，你可以利用定位


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{padding: 0;margin: 0}
li{list-style: none;vertical-align: top;}
a{text-decoration: none;color: #424542;}
.box{
	width: 230px;
	height: 34px;
	margin: 30px auto;
	background: #F7F7F7;
	border-bottom: 1px solid #DEDFE7;
	border-top: 1px solid #F7F3F7;
}
.left{
	float: left;
	font-size: 16px;
	line-height: 16px;
	border-left: 2px solid #399E08;
	margin-top: 9px;
	padding-left: 10px;
	color: #424542;
	font-family:'微软雅黑';
}
.box ul{
	padding-top: 11px;
	float: right;
}
.box li{
	float: left;
	width: 33px;
	height: 22px;
	border: 1px solid #DEDBDE;
	border-bottom: none;
	font-family: '微软雅黑';
	font-size: 12px;
	margin-left:4px;
	line-height: 22px;
	text-align: center;	
	_position:relative;

}
.box a{
	display: block;
	width: 33px;

}
.box a:hover{
	_position:absolute;
	background: #fff;
	height: 23px;
}
</style>

<body>
	<div class="box">
		<p class="left">热搜榜</p>
		<ul>
			<li><a href="">全部</a></li>
			<li><a href="">大陆</a></li>
			<li><a href="">港台</a></li>
			<li><a href="">欧美</a></li>
		</ul>
	</div>
</body>
</html>