当前位置：首页 → 问答吧 → 发现一个IE6下很奇怪的问题，谁有兴趣来看下。

发现一个IE6下很奇怪的问题，谁有兴趣来看下。

时间：2011-01-18

来源：互联网

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ padding::0; margin:0;} .v_caption{text-align:center; overflow:hidden;zoom:1;} .highlight_tip span{background:url(../img/icon14.png) no-repeat; width:9px; height:9px; display:inline-block;margin: 7px 3px 0;cursor:pointer;} .highlight_tip .current{ background:url(../img/icon13.png) no-repeat;} .prev,.next{ display:block; width:80px; height:26px; cursor:pointer;} .prev{ float:left;} .next{ float:right;} </style> </head> <body> <div class="v_caption"><span class="prev" > </span><span class="next"> </span> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

在IE6下prev，next两边如果没定背景色的话，定了宽度就没有用。我用绝对定位还是一样。太奇怪了。嘿嘿。
你给.prev,.next定个背景色，宽度就出来了。

[ 本帖最后由 hemin007 于 2011-1-18 10:03 编辑 ]

作者: hemin007 发布时间: 2011-01-18

不是width失效，是被.highlight_tip 挡住了

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ padding::0; margin:0;} .v_caption{text-align:center; overflow:hidden;zoom:1; height:26px;} .highlight_tip{margin:0 80px;} .highlight_tip span{background:url(../img/icon14.png) no-repeat; width:9px; height:9px; display:inline-block;margin: 7px 3px 0;cursor:pointer;} .highlight_tip .current{ background:url(../img/icon13.png) no-repeat;} .prev,.next{width:80px; height:26px; cursor:pointer;} .prev{ float:left;} .next{ float:right; background:red;} </style> </head> <body> <div class="v_caption"><div class="prev" >111111</div><div class="next">111</div> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

换个方法，定位也是可以的，需要注意的是highlight_tip层级要低于prev和next

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ padding::0; margin:0;} .v_caption{text-align:center; overflow:hidden;zoom:1;} .highlight_tip{position:relative;z-index:1;} .highlight_tip span{background:url(../img/icon14.png) no-repeat; width:9px; height:9px; display:inline-block;margin: 7px 3px 0;cursor:pointer;} .highlight_tip .current{ background:url(../img/icon13.png) no-repeat;} .prev,.next{ display:block; width:80px; height:26px; cursor:pointer;} .prev{position:absolute; left:0;z-index:2;} .next{ position:absolute; top:0;z-index:2;} </style> </head> <body> <div class="v_caption"><span class="prev" > </span><span class="next"> </span> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 redsky1987 于 2011-1-18 10:29 编辑 ]

作者: redsky1987 发布时间: 2011-01-18

谢谢楼上的啊。
.highlight_tip，和.prev,.next加背景色后，就发现没有什么层次问题。
不加背景色呢，又出现上下层次问题。IE6确实很变态。

让我想起了当年写的自适应菜单和分页。这个只是左右两边加了div而已

[ 本帖最后由 hemin007 于 2011-1-18 10:45 编辑 ]

作者: hemin007 发布时间: 2011-01-18

你的意思是絕對定位的情況下沒有背景的A鏈接，鼠標作用域不正常？

作者: gogoman 发布时间: 2011-01-18