IE6下a hover后隐藏页面不出现，不知什么原因
时间：2010-10-10
来源：互联网
学习相对/绝对定位，在本版看到一个关于盒模式的帖，学做了一个，不过，IE6中隐藏的信息面板没有出来，FF中信息也没能左对齐，麻烦各位大虾帮忙看一下，问题出在哪里，谢了先~~
当然了，a里面不能包含div，也没写头文件，这都是问题
不过，似乎隐藏信息面板不出来另有原因呢
当然了，a里面不能包含div，也没写头文件，这都是问题
不过，似乎隐藏信息面板不出来另有原因呢
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> <!-- * {margin:0 auto; padding:0; border:0; list-style:none} body {font:14px 宋体; color:fff;line-height:1.6em; background:#999} #c {text-align:center} /* 整个文档居中 */ li {float:left; margin:5px; padding:2px; border:1px solid #fff; display:inline; width:120px; position:relative;} h3 { background-color: #F90; padding-top:3px; text-align:center; } ul { width: 600px; border-top: 1px solid #F60; } ul li { padding:5px; border-bottom: 1px solid #ccc; } dl { width: 160px; float:right; color: #999; line-height:20px; } dl dd span { font-weight: bold; color: #639; } a { position: relative;/* 设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位 */ display:block;/* 让链接以块状呈现，这样不用点中链接文字就可以响应链接 */ color: #fff; text-decoration:none } a div { display: none;/* 初始化信息面板不显示 */ } a img { width:80px; height:80px; border:none;/* 去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框 */ display:block; position: absolute;/* 用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦 */ top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/ left:5px; } a:hover div { position: absolute; padding:5px; display:block; width: 245px;/ *只给出宽度，高让它随内容多少自动调整 */ left:150px;/*这是相对父级A的定位*/ top: 20px; border: 1px solid rgb(91,185,233); background-color: rgb(228,246,255); z-index:999;/* 把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效 */ } --> </style> </head> <body> <div id="c"> <ul> <li><a href="#">小 张<div><img src="0.jpg" alt="" /> <dl> <dd><span>宅电:</span>0ddd-8dsfsfs</dd> <dd><span>手机号:</span>138xxxxxx</dd> <dd><span>QQ号:</span>1xxxxxxxx</dd> <dd><span>邮 箱:</span>[email protected]</dd> </dl></div></a></li> <li><a href="#">小 张<div><img src="0.jpg" alt="" /> <dl> <dd><span>宅电:</span>0ddd-8dsfsfs</dd> <dd><span>手机号:</span>138xxxxxx</dd> <dd><span>QQ号:</span>1xxxxxxxx</dd> <dd><span>邮 箱:</span>[email protected]</dd> </dl></div></a></li> <li><a href="#">小 张<div><img src="0.jpg" alt="" /> <dl> <dd><span>宅电:</span>0ddd-8dsfsfs</dd> <dd><span>手机号:</span>138xxxxxx</dd> <dd><span>QQ号:</span>1xxxxxxxx</dd> <dd><span>邮 箱:</span>[email protected]</dd> </dl></div></a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行
[ 本帖最后由 tmulmt 于 2010-10-10 19:21 编辑 ] 提示：您可以先修改部分代码再运行
作者: tmulmt 发布时间: 2010-10-10
行内元素（a，span,b,em...）是不能包含块级元素（div，form，dl）这些的。
因此 a:hover div实际上暗示了html结构上的错误。
这里有自己看到过的一个Tips，原理类似：
因此 a:hover div实际上暗示了html结构上的错误。
这里有自己看到过的一个Tips，原理类似：
引用:
p是block_level元素,没有其他的块级元素可以牵入到p里,因为在P元素中遇到块级元素后会立即闭合P元素；如：<p><div></div></p>会被解析成<p></p><div></div><p></p>。作者: yoom 发布时间: 2010-10-10
多谢木匠；）
我是对照这个帖练习的
http://bbs.blueidea.com/viewthre ... p;extra=&page=1
人家那个隐藏页面能出来，我的就不行。。。
我是对照这个帖练习的
http://bbs.blueidea.com/viewthre ... p;extra=&page=1
人家那个隐藏页面能出来，我的就不行。。。
作者: tmulmt 发布时间: 2010-10-10
加了个背景，隐藏页出来了，但信息部分对不齐呢
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> <!-- * {margin:0 auto; padding:0; border:0; list-style:none} body {font:14px 宋体; color:fff;line-height:1.6em; background:#999} #c {text-align:center} /* 整个文档居中 */ li {float:left; margin:5px; padding:2px; border:1px solid #fff; display:inline; width:120px; position:relative;} ul { width: 600px; border-top: 1px solid #F60; } ul li { padding:5px; border-bottom: 1px solid #ccc; } dl { width: 160px; float:right; color: #999; line-height:20px; } dl dd span { font-weight: bold; color: #639; } a { position: relative;/* 设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位 */ display:block;/* 让链接以块状呈现，这样不用点中链接文字就可以响应链接 */ color: #fff; text-decoration:none } a div { display: none;/* 初始化信息面板不显示 */ } a img { width:80px; height:80px; border:none;/* 去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框 */ display:block; position: absolute;/* 用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦 */ top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/ left:5px; } a:hover {background:#fff; color:#69f; }/*IE7以下版本A状态伪类bug*/ a:hover div { position: absolute; padding:5px; display:block; width: 245px;/ *只给出宽度，高让它随内容多少自动调整 */ left:150px;/*这是相对父级A的定位*/ top: 20px; border: 1px solid rgb(91,185,233); background-color: rgb(228,246,255); z-index:999;/* 把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效 */ } --> </style> </head> <body> <div id="c"> <ul> <li><a href="#">小 张<div><img src="0.jpg" alt="" /> <dl> <dd><span>宅电:</span>0ddd-8dsfsfs</dd> <dd><span>手机号:</span>138xxxxxx</dd> <dd><span>QQ号:</span>1xxxxxxxx</dd> <dd><span>邮 箱:</span>[email protected]</dd> </dl></div></a></li> <li><a href="#">小 张<div><img src="0.jpg" alt="" /> <dl> <dd><span>宅电:</span>0ddd-8dsfsfs</dd> <dd><span>手机号:</span>138xxxxxx</dd> <dd><span>QQ号:</span>1xxxxxxxx</dd> <dd><span>邮 箱:</span>[email protected]</dd> </dl></div></a></li> <li><a href="#">小 张<div><img src="0.jpg" alt="" /> <dl> <dd><span>宅电:</span>0ddd-8dsfsfs</dd> <dd><span>手机号:</span>138xxxxxx</dd> <dd><span>QQ号:</span>1xxxxxxxx</dd> <dd><span>邮 箱:</span>[email protected]</dd> </dl></div></a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: tmulmt 发布时间: 2010-10-10
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
