双倍边距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="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的更多相关文章
- 解决IE6双倍边距BUG
解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1)要为块状元素; 2)要左侧浮动; 3)要有左外边距(margin-left); 解决这个BUG很容易,只需要在相应的块状元素的C ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- 【IE6双倍边距】-IE6双倍边距的bug
效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...
- IE6 双倍距BUG
IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;
- IE双边距bug
标准参考 根据 W3C CSS2.1 规范中的描述,对于非替换的浮动元素,若 'margin-left' 或 'margin-right' 特性的计算值为 'auto',则它们的实际使用值为 '0'. ...
- 慎用margin系列2---ie6双倍边距问题
IE6下有一个著名的margin双倍bug 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠 ...
- ie6双边距bug及其解决办法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- IE6 margin 双倍边距解决方案
一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实 ...
随机推荐
- Ubuntu 15.04 无损扩展分区(目录)容量的方法 (无需格式化, 文件不丢失)
源 起 用了一段时间Ubuntu,碰到了UBuntu磁盘空间不足的问题, 最初我只给Ubuntu分配了30个G的空间, 昨天试用了一下VirtualBox安装了一个xp虚拟系统,用以解决Ubuntu下 ...
- slickgrid 一个优秀的JS表格插件
从熟悉JS以来,慢慢的喜欢上了这个门语言. 不自觉的,看了好多js的知识,可能也是因为做项目的原因吧. 这里稍微说下一个JS的grid插件 --slickgrid 了解这个插件也不是很多,稍微了解了下 ...
- windows Api AlphaBlend的使用方法
很早的时候公司里开发了个c++客户端软件,需要支持windows2000,要求简单小巧,并且不希望引入其他界面库,图形引擎之类的东西,像gdi+之类的,于是对于美工做出来的一些界面,需要有alpha通 ...
- php数组中删除元素之重新索引
如果要在某个数组中删除一个元素,可以直接用的unset,但今天看到的东西却让我大吃一惊 <?php $arr = array('a','b','c','d'); unset($arr[1]); ...
- SQL中各数据类型的长度、精度
在 Microsoft? SQL Server? 中,每个列.局部变量.表达式和参数都有一个相关的数据类型,这是指定对象可持有的数据类型(整型.字符.money 等等)的特性. SQL Server ...
- 2015-0306—DataLList
DataList具有repeater的所有功能,不同的是DataList自动将模板绘制成为一个表格,每一行数据都绘制成<tr>. 一.SQL的准备工作: 按照以下代码创建: create ...
- 20150225--ASP.NET基础(2)
一.引用外部样式表或JS,在<head>-</head>标签之间添加: <link href="yangshi.css" type="tex ...
- UI3_UILabel
// // AppDelegate.m // UI3_UILabel // // Created by zhangxueming on 15/6/29. // Copyright (c) 2015年 ...
- PHP的final、抽象类和方法
final关键字的用法 final class Computer{ //无法继承的类 final public function run(){ //无法继承的方法 } } class NoteBook ...
- 转帖:使用TortoiseGit处理代码冲突
原址:http://www.cnblogs.com/jason-beijing/p/5718190.html 场景一 user0 有新提交 user1 没有pull -> 写新代码 -&g ...