<!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="img/1.png" ><div></div></li>

        <li><img src="img/2.png"><div></div></li>

        <li><img src="img/3.png"><div></div></li>

        <li><img src="img/4.png" ><div></div></li>

        <li><img src="img/5.png" ><div></div></li>

        <li><img src="img/6.png" ><div></div></li>

    </ul>

    <ul class="ul1">

        <li><img src="img/7.png"><div></div></li>

        <li><img src="img/8.png"><div></div></li>

        <li><img src="img/9.png"><div></div></li>

        <li><img src="img/10.png"><div></div></li>

        <li><img src="img/11.png"><div></div></li>

        <li><img src="img/12.png"><div></div></li>

    </ul>

</div>

</body>

</html>

　　

双倍边距bug的更多相关文章

  1. 解决IE6双倍边距BUG

    解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1)要为块状元素; 2)要左侧浮动; 3)要有左外边距(margin-left); 解决这个BUG很容易,只需要在相应的块状元素的C ...

  2. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  3. 【IE6双倍边距】-IE6双倍边距的bug

    效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...

  4. IE6 双倍距BUG

    IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;

  5. IE双边距bug

    标准参考 根据 W3C CSS2.1 规范中的描述,对于非替换的浮动元素,若 'margin-left' 或 'margin-right' 特性的计算值为 'auto',则它们的实际使用值为 '0'. ...

  6. 慎用margin系列2---ie6双倍边距问题

    IE6下有一个著名的margin双倍bug 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠 ...

  7. ie6双边距bug及其解决办法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. IE6 margin 双倍边距解决方案

    一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实 ...

随机推荐

  1. Chrome模拟手机浏览器（iOS/Android）的三种方法，亲测无误！

    大网站都有推出自己的手机访问版本页面,不管是新闻类还是视频网站,我们在电脑是无法直接访问到手机网站的,比如我经常访问一个3g.qq.com这个手机站点,如果在电脑上直接打开它,则会跳转到其它页面,一般 ...

  2. 关于Java中计算日期差值不准确问题

    1.字符串日期相减 如:2016-4-1,必须先将此字符串转成Date对象,并且, 格式必须为:yyyy—MM—dd  HH:mm:ss. 如果不转就直接计算(2016-4-1)两个这样的日期,则误差 ...

  3. iOS访问通讯录开发-读取联系人信息

    读取通信录中的联系人一般的过程是先查找联系人记录,然后再访问记录的属性,属性又可以分为单值属性和多值属性.通过下面例子介绍联系人的查询,以及单值属性和多值属性的访问,还有读取联系人中的图片数据. 本案 ...

  4. Xcode中如何更改Bundle identifier

    1.如图所示,更改Info.plist 中的Bundle identifier

  5. webSphere提示SSL证书过期，解决方法

    1.点击Security ------SSL certificate and key management2.点击Related Items下的key stores and certificates3 ...

  6. 关于js unshift() 与pop() 功能

    最近在研究如何精简贪吃蛇代码,网上许多大神已经将其精简到30行之内就可以搞定. 我尝试着学习并且研究是否能进一步精简的方式. 偶然间又重新温习了一遍pop()和unshift() 的功能.(之前有学过 ...

  7. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4

    5.2.2 让瀑布流动起来 打好基建之后,就需要写JavaScript代码.首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在 ...

  8. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  9. MySQL之左连接与右连接

    左连接: select 列1,列2,列N from tableA left join tableB on tableA.列 = tableB.列(正常是一个外键列) [此处表连接成一张大表,完全当成一 ...

  10. 洛谷 P1195 口袋的天空

    题目背景 小杉坐在教室里,透过口袋一样的窗户看口袋一样的天空. 有很多云飘在那里,看起来很漂亮,小杉想摘下那样美的几朵云,做成棉花糖. 题目描述 给你云朵的个数N,再给你M个关系,表示哪些云朵可以连在 ...