62,074
社区成员
发帖
与我相关
我的任务
分享关于div在有些浏览器显示的问题
下面一段代码：
<!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>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"Times New Roman", Times, serif; background-color:#333;}
#main{margin:10px auto; width:110px;}
#main ul{list-style:none;}
#main ul li{line-height:20px; border-bottom:1px dashed #FC0;}
#main ul li a{color:#E7E7E7; text-decoration:none; position:relative; display:block;}
#main ul li a div{display:none;}
#main ul li a:hover{ visibility:visible; color:#FFFFFF;}
#main ul li a:hover div{position:absolute; left:60px; top:-40px; background-color:#FFFFFF; display:block;
width:300px; height:100px; color:#000000; overflow:hidden;z-index:100;}
#main ul li a:hover div dt{float:left; width:8px; background:url(234.gif) center no-repeat;height:100px;
display:block; background-color:#333;}
#main ul li a:hover div dd{float:right; width:270px; height:auto; line-height:18px; padding:6px 10px;}
</style>
</head>
<body >
<center>
<form name="form1" method="post" id="form1">
<table>
<tr>
<td>
<div id="main"> <ul> <li> <a href="BrandDetail.aspx?brandId=18"> <span style="z-index:-1;">Ermenegildo Zegna（杰尼亚）
</span> <div> <img width
="250" height ="100" src ="../admin/uploadfile/Ermenegildo Zegnapic2.JPG" /> </div> </a> </li> <ul> </div>
</td>
<td>
<div id="main"> <ul> <li> <a href="BrandDetail.aspx?brandId=18"> <span style="z-index:-1;">LV（路易威登） </span> <div>
<dd> <img width
="250" height ="100" src ="../admin/uploadfile/Ermenegildo Zegnapic2.JPG" /> </dd> </div> </a> </li> <ul> </div>
</td>
<td>
<div id="main"> <ul> <li> <a href="BrandDetail.aspx?brandId=18"> <span style="z-index:-1;">LV（路易威登） </span> <div>
<dd> <img width
="250" height ="100" src ="../admin/uploadfile/Ermenegildo Zegnapic2.JPG" /> </dd> </div> </a> </li> <ul> </div>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
----------------------------------------------------------------------------------------
代码有点长，在ie8里面鼠标移到文字的超链接上时弹出的div可以遮住后面的文字，而在360浏览器里不行，弹出的div上还是可以看到后面的字，请问有什么办法遮住这些字？
<!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>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"Times New Roman", Times, serif; background-color:#333;}
#main{margin:10px auto; width:110px;}
#main ul{list-style:none;}
#main ul li{line-height:20px; border-bottom:1px dashed #FC0;}
#main ul li a{color:#E7E7E7; text-decoration:none; position:relative; display:block;}
#main ul li a div{display:none;}
#main ul li a:hover{ visibility:visible; color:#FFFFFF;}
#main ul li a:hover div{position:absolute; left:60px; top:-40px; background-color:#FFFFFF; display:block;
width:300px; height:100px; color:#000000; overflow:hidden;z-index:100;}
#main ul li a:hover div dt{float:left; width:8px; background:url(234.gif) center no-repeat;height:100px;
display:block; background-color:#333;}
#main ul li a:hover div dd{float:right; width:270px; height:auto; line-height:18px; padding:6px 10px;}
</style>
</head>
<body >
<center>
<form name="form1" method="post" id="form1">
<table>
<tr>
<td>
<div id="main"> <ul> <li> <a href="BrandDetail.aspx?brandId=18"> <span style="z-index:-1;">Ermenegildo Zegna（杰尼亚）
</span> <div> <img width
="250" height ="100" src ="../admin/uploadfile/Ermenegildo Zegnapic2.JPG" /> </div> </a> </li> <ul> </div>
</td>
<td>
<div id="main"> <ul> <li> <a href="BrandDetail.aspx?brandId=18"> <span style="z-index:-1;">LV（路易威登） </span> <div>
<dd> <img width
="250" height ="100" src ="../admin/uploadfile/Ermenegildo Zegnapic2.JPG" /> </dd> </div> </a> </li> <ul> </div>
</td>
<td>
<div id="main"> <ul> <li> <a href="BrandDetail.aspx?brandId=18"> <span style="z-index:-1;">LV（路易威登） </span> <div>
<dd> <img width
="250" height ="100" src ="../admin/uploadfile/Ermenegildo Zegnapic2.JPG" /> </dd> </div> </a> </li> <ul> </div>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
----------------------------------------------------------------------------------------
代码有点长，在ie8里面鼠标移到文字的超链接上时弹出的div可以遮住后面的文字，而在360浏览器里不行，弹出的div上还是可以看到后面的字，请问有什么办法遮住这些字？
...全文
请发表友善的回复…
发表回复
RHCL 2009-12-12
- 打赏
- 举报
浏览器标准不统一。。。呃。。。lz里面有部分标签未闭合,还是嵌套也不符合标准，不知是不是这原因。。。
lxkim 2009-12-12
- 打赏
- 举报
这里也没有人解答呀
lxkim 2009-12-10
- 打赏
- 举报
设置底色没有用吧
iyori 2009-12-10
- 打赏
- 举报
设置 弹出的div 的背景颜色 为 白色 或者 其他底色 就可以了
GoldKi 2009-12-10
- 打赏
- 举报
对浏览器兼容问题！现在的浏览器太多了，内核也不同！就像你用IE6，和IE8测出来完全不同的效果！所以很麻烦！可以多测下，基本上不变形就行了
Jack2013tong 2009-12-10
- 打赏
- 举报
浏览器兼容的问题很麻烦啊,
