首页 > 代码库 > 双倍边距bug
双倍边距bug
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} li{width: 59px; height: 87px; float: left; margin: 20px; background: #333333; position: relative; list-style: none; }
/**display:inline;zoom:1 *vertical:top margin: 20px;改成 margin:0 20px;如果给ul浮动就没事了 双倍边距bug的条件 浮动 外编剧 块状元素 解决双倍边距bug
#div1{width: 594px; margin: 50px; border-top:1px solid #333;} #div1 ul li div{ width: 232px; height: 143px; background: #666666 url("img/tip.png") no-repeat; position: absolute; top: -150px; left: 20px; display: none; }
</style> <script> window.onload=function(){ var aLi= document.getElementsByTagName("li") for(var i=0; i<aLi.length;i++){ aLi[i].onmouseover=function(){ this.getElementsByTagName("div")[0].style.display="block"; } aLi[i].onmouseout=function(){ this.getElementsByTagName("div")[0].style.display="none"; } } } </script></head><body><h1>最新上线</h1><div style="1px solid #000;" id="div1"> <ul class="ul1"> <li><img src="http://www.mamicode.com/img/1.png" ><div></div></li> <li><img src="http://www.mamicode.com/img/2.png"><div></div></li> <li><img src="http://www.mamicode.com/img/3.png"><div></div></li> <li><img src="http://www.mamicode.com/img/4.png" ><div></div></li> <li><img src="http://www.mamicode.com/img/5.png" ><div></div></li> <li><img src="http://www.mamicode.com/img/6.png" ><div></div></li> </ul> <ul class="ul1"> <li><img src="http://www.mamicode.com/img/7.png"><div></div></li> <li><img src="http://www.mamicode.com/img/8.png"><div></div></li> <li><img src="http://www.mamicode.com/img/9.png"><div></div></li> <li><img src="http://www.mamicode.com/img/10.png"><div></div></li> <li><img src="http://www.mamicode.com/img/11.png"><div></div></li> <li><img src="http://www.mamicode.com/img/12.png"><div></div></li> </ul></div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。