方法一:
该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。
HTML结构部分:

<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<span><img src="images/demo.jpg" alt="" /></span>
</div>

CSS样式部分:

<style type="text/css">
#box {
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box span {
    display:table-cell;
    vertical-align:middle;
}
#box img {
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box {
    position:relative;
    overflow:hidden;
}
#box span {
    position:absolute;
    left:50%;top:50%;
}
#box img {
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二:
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法。
HTML结构部分:

<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<i></i><img src="images/demo.jpg" alt="" />
</div>
 
<style type="text/css">
#box{
    width:500px;height:400px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #d3d3d3;background:#fff;
}
#box img {
    border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
}
#box img {
    vertical-align:middle
}
</style>
<![endif]-->

方法三:
该方法针对IE6/IE7,将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中,标准浏览器还是使用上面的方法来实现兼容,并且结构也是比较优雅。
HTML结构部分:

<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/demo.jpg" alt="" />
</div>

CSS样式部分:

#box {
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
    
    /* 兼容标准浏览器 */
    display: table-cell;
    vertical-align:middle;
	
    /* 兼容IE6/IE7 */
    *display:block;
    *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
    *font-family:Arial; /* 防止非utf-8引起的hack失效问题,如gbk编码 */
}

#box img {
    vertical-align:middle;
}

以上方法来源于:雨夜带刀’s Blog

另一篇关于这个问题解决方案的文章,请看 大小不固定的图片、多行文字的水平垂直居中

主要出现了两个问题,第一个问题是,无法分区。表现的问题就是到 boot camp 助理最后一步的时候,分区老是不成功。

解决方法:重启按住 Command + R 选择 磁盘工具,然后选择系统盘,检查错误,修复错误。然后重启再次使用 Boot Camp 就可以正常分区了。

第二个问题就是,安装程序无法创建新的系统分区,也无法定位现有系统分区。

苹果也给了解决方案,http://support.apple.com/kb/TS4599?viewlocale=zh_CN。

但是我的问题是,我把移动硬盘插在了 左侧 的 USB 接口上,并且 USB 的格式是 EXFAT 格式。

最后把移动硬盘去掉,顺利安装成功。

对于 IE6 也可以使用纯 CSS 来实现 position:fixed 的效果。直接上代码吧。
先是结构。

    <div class="container">
        我是IE6,使用 absolute 模拟 fixed.</br>
        这里多多复制几个,效果明显。
    </div>
    <div class="fixed"></div>

然后是 CSS。

        body {
            height:100%;
            overflow-y:auto;
            padding:0px;
            margin:0px;
        }
        .container {
            height:1800px;
            background:#CCC;
        }
        .fixed {
            position:fixed;
            top:50px;
            left:50px;
            background:red;
            height:50px;
            width:50px;
        }

还有对于 IE6 来说,加一个单独的样式

   <!--[if lte IE 6]>
        <style type="text/css">
            html {overflow-x:auto; overflow-y:hidden;}
            .fixed {
                position:absolute;
            }
        </style>
    <![endif]-->

原理就是对于 body 设置高度 100%,html 垂直方向上,超出高度给隐藏掉。然后里面的内容自己滚动,而 absolute 的相对于浏览器窗口的话,因为浏览器窗口就那么大,又不滚动,所以 absolute 看起来就 fixed 了。

但是这个有个问题,就是 所有设置了 absolute 和 relative 的元素,都会表现为 fixed 的,所以还是有副作用的。不过可以用来做遮罩层。

例子可以使用 IE6 浏览器访问。

服务器用的是 DS 的 年付 15$ 512内存,256 交换空间的这款。貌似我的系统是 Ubuntu 12.10 。因为 Gitlab 官方推荐是 1GB 内存,所以这个稍微显得有点危险,尝试了大概一个星期,最后终于安装成功了。下面说说我遇到的坑。

其实官方的安装文档蛮详细的,按照官方文档一步一步来,应该不会出问题。但是出了问题的话,还是不知道去哪里找解决方案,我就出了这两个问题,经过坚持不懈的搜索和尝试,最后终于解决了这个错误,因为几乎每次重新安装,都会出现这个错误,所以还是写在这里,一方面大家可以看看,一方面自己也做一个记录。

主要是两个地方,

一个是安装完成之后,执行 service gitlab start 的时候报错,并且启动不成功,可以通过 service gitlab status 来查看状态,如果启动成功了,就会看到 pid 等信息,访问网页版的会提示 502,在

cat /var/log/nginx/gitlat_error.log
 
2013/08/09 10:42:17 [crit] 32573#0: 30 connect() to unix:/home/gitlab/gitlab/tmp/sockets/gitlab.socket failed (2: No such file or directory) while connecting to upstream, client: **********, server: **********, request: "GET / HTTP/1.1", upstream: "http://unix:/home/gitlab/gitlab/tmp/sockets/gitlab.socket:/", host: "*******"

查看日志,会出现此问题。

如果遇到这个问题,尝试重启服务器,然后在启动 gitlab 尝试多试几次,如果还是不行的话,再尝试执行下面几行代码,记得先 cd /home/git/gitlab

sudo -u gitlab -H bundle exec rake assets:precompile RAILS_ENV=production

这样我是可以了,但是不知道你的问题解决没有。

然后就是 url 跳转到了 /user/sign_in 登录页面,但是此时我还是 502 了,此时说明 gitlab 执行成功了,但是 还是有问题,经过搜索,在这篇博文中发现同样的错误,然后想起来,在按教程安装的时候,提示这步有错误,代码如下。

cp config/unicorn.rb.example config/unicorn.rb

执行这句的时候,提示没有此文件,但是在,config 目录下,发现了 unicorn.rb 文件,只不过是空的 0KB 大小,然后尝试再次执行此命令,一直都是提示 没有此文件,
此时尝试执行下,

sudo -u git -H bundle install --deployment --without development test postgres aws

以安装 unicorn ,但是官方文档是不安装这个的,不知道为什么,反正我是安装了。可以和官方的文档对比下(在 Install Gems 这节),多安装了一个unicorn。不过这个应该不是必须的。

此时再次执行

cp config/unicorn.rb.example config/unicorn.rb

如果还是提示没有此文件,那么就大杀器来了。

将 config/unicorn.rb 拷贝一份到本地,将这个文件中的内容全部复制近本地的 unicorn.rb 中,然后将其上传到 config 中。然后再执行

bundle exec unicorn_rails -c config/unicorn.rb -E production -D

重启下 gitlab 再试试。然后我就解决了这个问题。

jQuery 中 mouseout() 和 mouseleave() 的触发时机,都是在鼠标离开匹配的元素时被触发,在他俩之间的不同,主要就是在子元素上“事件冒泡”处理方式上的区别。

1. 没有子元素的情况下。

如果匹配的元素没有子元素的情况下,这两者之间是没有区别的。

2. 匹配的元素还有子元素。

如果匹配元素有子元素,那么这两者之间的区别主要来自于对“事件冒泡”时候的处理。

例如,下面的结构:

    <div id="outerBox">OuterBox
	<div id="innerBox">InnerBox
	</div>
    </div>

P.S 确保给 outerBox 和 innerBox 都绑定某些事件。

mouseout()
当鼠标进入 “outerBox” ,没有事件被触发。
当鼠标离开 “outerBox” ,并且进入 “innerBox” , “outerBox” 上绑定的事件被触发。
当鼠标离开 “innerBox” , 并且进入 “outerBox” , 紧随着 “outerBox” 的事件,“innerBox” 上绑定的事件被触发。
当鼠标离开 “outerBox”, “outerBox” 上绑定的事件被触发。

mouseleave()
当鼠标进入 “outerBox” ,没有事件被触发。
当鼠标离开 “outerBox” ,并且进入 “innerBox” , 没有事件被触发。
当鼠标离开 “innerBox” , 并且进入 “outerBox” ,“innerBox” 上绑定的事件被触发。
当鼠标离开 “outerBox”, “outerBox” 上绑定的事件被触发。

为了更好地理解,下面给出一个例子。

    <html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 
<style type="text/css">
	#mouseout-outerBox1, #mouseleave-outerBox1,
	#mouseout-outerBox2, #mouseleave-outerBox2{
		margin:8px;
		border:1px groove #999966;
		background-color : #999966;
		width:150px;
		height:150px;
		color:white;
	}
	#mouseout-innerBox2, #mouseleave-innerBox2{
		margin:8px 8px 8px 16px;
		border:1px groove #0000FF;
		background-color : #0000FF;
		width:100px;
		height:100px;
		color:white;
	}
	span{
		padding:8px;
	}
	.content{
		width:500px;
		height:250px;
	}
	.container1{
		float:left;
		padding-right:16px;
	}
</style>
 
</head>
<body>
  <h1>jQuery mouseout() vs mouseleave() example</h1>
 
<div class="content">
  <div class="container1">
	  <span>mouseout() - no child element</span>
	  <div id="mouseout-outerBox1">OuterBox
	  </div>
	  <span id="mouseout-msg1">#mouseout is fired : 0</span>
  </div>
 
  <div class="container1">
  	  <span>mouseleave() - no child element</span>
	  <div id="mouseleave-outerBox1">OuterBox
	  </div>
	  <span id="mouseleave-msg1">#mouseleave is fired : 0</span>
  </div>
</div>
 
 
 
<div class="content">
  <div class="container1">
	  <span>mouseout() - with child elements</span>
	  <div id="mouseout-outerBox2">OuterBox
	  	<div id="mouseout-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseout-outer-msg2">#mouseout outer is fired : 0</span>
          <br/>
	  <span id="mouseout-inner-msg2">#mouseout inner is fired : 0</span>
  </div>
 
  <div class="container1">
  	  <span>mouseleave() - with child elements</span>
	  <div id="mouseleave-outerBox2">OuterBox
	  	<div id="mouseleave-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseleave-outer-msg2">#mouseleave outer is fired : 0</span>
          <br/>
	  <span id="mouseleave-inner-msg2">#mouseleave inner is fired : 0</span>
  </div>
</div>
 
<script type="text/javascript">
 
//example 1
var mouseout1=1;
$('#mouseout-outerBox1').mouseout(function(event) {
  $('#mouseout-msg1').text('#mouseout is fired : ' + mouseout1++)
});
 
var mouseleave1=1;
$('#mouseleave-outerBox1').mouseleave(function(event) {
  $('#mouseleave-msg1').text('#mouseleave is fired : ' + mouseleave1++)
});
 
//example 2
var mouseoutouter2=1;
$('#mouseout-outerBox2').mouseout(function(event) {
  $('#mouseout-outer-msg2').text('#mouseout outer is fired : ' + mouseoutouter2++)
});
 
var mouseoutinner2=1;
$('#mouseout-innerBox2').mouseout(function(event) {
  $('#mouseout-inner-msg2').text('#mouseout inner is fired : ' + mouseoutinner2++)
});
 
var mouseleaveouter2=1;
$('#mouseleave-outerBox2').mouseleave(function(event) {
  $('#mouseleave-outer-msg2')
         .text('#mouseleave outer is fired : ' + mouseleaveouter2++)
});
 
var mouseleaveinner2=1;
$('#mouseleave-innerBox2').mouseleave(function(event) {
  $('#mouseleave-inner-msg2')
         .text('#mouseleave inner is fired : ' + mouseleaveinner2++)
});
 
</script>
</body>
</html>

或者点击这里看看这个例子.

其实对 BFC(Block Formatting Contexts 块级格式化上下文) 听过很多次了,虽然每次都无意中也有用到,但是并没有深入的看看这个到底是个什么东西。今天有点时间看到了这篇文章,但是感觉理解起来有点吃力,所以总结下,按照自己的理解再写一写,一方面加深记忆,一方面,以后自己理解起来也方便。

1. 防止外边距叠加。
这里的防止外边距叠加不是两个同级(兄弟)元素之间的外边距叠加,而是防止父元素和子元素之间的外边距叠加。来个结构:

  <div class="a"></div>
  <div class="a">
    <div class="b"></div>
    <div class="b"></div>
  </div>

然后样式:

  .a, .b {
    margin:10px 0;
  }
  .a {
    width:200px;
    height:50px;
    background:red;
  }
 .b {
    width:100px;
    height:10px;
    background:blue;
  }

此时给 .a .b 都有一个

  margin:10px 0;

的外边距。但是并没有触发 .b 的 BFC 特性,此时如图所示:

对 BFC (Block Formatting Contexts) 的一点理解
例子请看:http://jsbin.com/odesoz/3/

然后给 .a 添加

  overflow:hidden;

以触发 .a 的 BFC 特性,此时结果如图所示:

对 BFC (Block Formatting Contexts) 的一点理解
红色是 .a ,蓝色是 .b ,且 .b(蓝色) 是 .a(红色) 的子元素,一目了然。
此时的例子请看:http://jsbin.com/odesoz/2/

2. 清除浮动
其实平常我们使用的清除浮动的技巧,也就是利用了 BFC 的原理。
浮动元素导致父级元素的高度塌陷,此时触发父级元素的 BFC,因为

创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC任然属于文档中的普通流。

其实这句话挺不好理解的,按我的理解,就是这个元素触发了 BFC 然后它就需要按它的行为来,不管里面的元素是什么样子的。不管你浮动不浮动,我多大我就是多大。所以讲浮动闭合(清除)了。
到这里,其实另一点也就呼之欲出了,那是什么呢?就是 只要是可以使父级元素触发 BFC 的特性,都可以闭合浮动。这些就是闭合浮动的原理。(参考

例子可看:http://jsbin.com/odesoz/5/(清除浮动), http://jsbin.com/odesoz/7/ (未清除浮动)

3. 块级格式化上下文不会重叠浮动元素
其实也就是如果有浮动元素和 BFC 一起的话,BFC 元素,会表现为有宽高的样子。具体请看这篇文章的 3.3,因为我觉得这里写的会比我写得好。而且配图也不错。

那么到底神马是 BFC 呢? (其实这些不想写来着,网上那么多,但还是加深印象吧)

其实说的简单点,就类似于在一个环境中的好几个 display:block 的元素所产生的相互影响的原理和表现。

比较专业的说法就是:它能把一个集合中的 float, margin, clear 等等的各种元素包裹,形成的一个集合就为 BFC , BFC 中的任何都不会对 BFC 外的元素产生影响。
通俗地来说:创建了 BFC 的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时 BFC 仍然属于文档中的普通流。
在普通流( Normal flow )中,在创建了块格式化上下文的元素中的子元素都会按照块格式化上下文提供的规矩来排列自己,除非自己也创建一个新的块格式化上下文。

如何触发块级格式化上下文(BFC)?

    float:left|right ,除了none
    overflow:hidden|auto|scroll(也就是除了overflow:visible;)
    position: absolute|fixed
    display:inline-block|table-cell|table
    fieldset 元素
    表格的单元格(display: table-cells,TD、TH)
    表格的标题(display: table-captions,CAPTION)
    表格元素创建的 “匿名框” 。(display:table 之后创建的匿名框 http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes)

虽然 IE6 7 不支持 BFC,但是在他们中有一个类似的概念 hasLayout。触发hasLayout的条件:

    position: absolute 
    float: left|right 
    display: inline-block 
    width: 除 “auto” 外的任意值 
    height: 除 “auto” 外的任意值 (例如很多人清除浮动会用到 height: 1%  ) 
    zoom: 除 “normal” 外的任意值 (MSDN)
    writing-mode: tb-rl (MSDN)
  在 IE7 中,overflow 也变成了一个 layout 触发器:
    min-width:任何值
    min-height:任何值
    max-width:除了none之外的任何值
    max-height:除了none之外的任何值
    overflow: hidden|scroll|auto ( 这个属性在IE之前版本中没有触发 layout 的功能。 )
    overflow-x|-y: hidden|scroll|auto (CSS3 盒模型中的属性,尚未得到浏览器的广泛支持。他们在之前IE版本中同样没有触发 layout 的功能)

其他一些知识点,请参考引用文章中的那几篇引用文章。