<!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. linux中重置服务器的mysql用户密码

    本文章前提条件是自己经把mysql登录密码给忘记了,这个时间我们解决方法有很多,重新安装mysql数据库一切重来,另一种是通过下面文章重新设置root密码,下面我们一起来看看方法二吧.     最 近 ...

  2. Cocos2d-JS内置粒子系统

    从类图中我们可以看到,Cocos2d-JS中有内置的11种粒子,这些粒子的属性都是预先定义好的,我们也可以在程序代码中单独修改某些属性,我们在上一节的实例中都已经实现了这些属性的设置.内置粒子系统内置 ...

  3. UINavigationController与UITabbarController的样式

    之前虽然也手写过这两中视图控制器,但是更多的还是使用SB来创建,最近发现了一些问题,现在总结一下. 1.改变UINavigationBar的颜色 在UINavigationController中,之前 ...

  4. HTML+CSS学习笔记 (14) - 单位和值

    标签:HTML+CSS 颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命 ...

  5. 【转载】#273 - Parameter Modifier Summary

    Here's a summary of the different parameter modifiers and how the behavior changes for each, when us ...

  6. (转)每天一个linux命令（46）：vmstat命令

    vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...

  7. 重新审视事件对象event

    前言:之前在学习事件对象event时,一是一直在chrome浏览器(作为主运行环境)下运行调试自个儿程序,二是可能当时对事件对象理解不透彻才导致现在对事件对象的用法陷入了一个大坑,遂以此篇博客记之. ...

  8. jQuery 简单漂亮的 Nav 导航菜单

    自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一 ...

  9. 内核中读取UTC时间

        记录这个知识点的原因是因为项目中需要保存充电日志,因此,趁着这个机会,深入了解一下Linux的时间系统. UTC:(Universal Time Coordinated) 协调世界时的缩写   ...

  10. CSS1-CSS3 <color>颜色知识知多少？

    非本人原创,原文转载自http://www.zhangxinxu.com/wordpress/2015/07/know-css1-css3-color/ by zhangxinxu from http ...