<!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. 将java项目打包成jar文件并在cmd运行

    保证java项目不报错能够通过运行 选择export 选择一个你要运行的程序入口Main方法 打开cmd,前提是你的javajdk及环境变量配置完成

  2. C#调用SSIS包及读取DataReader目标

    C#调用SSIS包需要引用两个DLL .(具体位置在C盘搜索,MSDN和百度提供的路径都不太正确) Microsoft.SQLServer.ManagedDTS.dll Microsoft.SqlSe ...

  3. php如何判断当前的操作系统是linux还是windows

    php_uname()这个函数的意义在于返回当前PHP所运行的系统的信息,下面对这个函数详细说明一下: /** * 功能:返回当前PHP所运行的系统的信息 * @param string $mode ...

  4. Cookie和Session简介与区别

    1.Cookie和Session简介与区别 在非常多时候,我们需要跟踪浏览者在整个网站的活动,对他们身份进行自动或半自动的识别(也就是平时常说的网站登陆之类的功能),这时候,我们常采用Cookie与 ...

  5. 零基础Android学习笔记-02 安卓程序生命周期

    一个安卓程序生命周期会经历7中状态,并不一定是每次都全部经历.Create,Start,ReStart,Pause,Resume,Stop,Destory. 重载方法,用helloWorld程序去体验 ...

  6. 【SNMP】SNMP概述

    SNMP概述 SNMP(Simple Network Management Protocol,简单网络管理协议)是目前UDP/IP网络中应用最为广泛的网络管理协议,它提供了一个管理框架来监控和维护互联 ...

  7. Cocos2d-JS坐标系

    在图形图像和游戏应用开发中坐标系是非常重要的,我们在Android和iOS等平台应用开发的时候使用的二维坐标系它的原点是在左上角的.而在Cocos2d-JS坐标系中它原点是在左下角的,而且Cocos2 ...

  8. JavaScript学习笔记 - 进阶篇（1）- JS基础语法

    前言 JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) JS进阶篇学习什么? 在JavaS ...

  9. OC4_遵守多个协议

    // // Calulator.h // OC4_遵守多个协议 // // Created by zhangxueming on 15/6/24. // Copyright (c) 2015年 zha ...

  10. 初探内联方式的 onload="doSomething()"为何要加"()"？而js代码的 onload="doSomething" 和 addEventListener 为何不加"()"？

    问题引入:在看<Jquery基础教程>第四版的时,P34页有这样一段话 引用函数与调用函数 这里在将函数指定为处理程序时,省略了后面的圆括号,只使用了函数名.如果带着圆括号,函数会被立即调 ...