display_inline-block_table-cell
1、display:inline-block;
兼容性：兼容到IE7+，Chrome，Firefox
html：
1 <ul class="list"> 2 <li>首页</li> 3 <li>文章列表</li> 4 <li>关于我</li> 5 </ul> 6 <ul class="list"> 7 <a href="#">首页</a> 8 <a href="#">文章列表</a> 9 <a href="#">关于我</a> 10 </ul>
css：
1 /*reset-style*/ 2 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} 3 ul,ol{list-style:none;} 4 body{font-size:12px;font-family:"Microsoft yahei";} 5 a{text-decoration:none;} 6 /*基本页面样式*/ 7 .list{ 8 width:350px; margin:50px auto; 9 } 10 .list li{ 11 display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid #666; 12 } 13 .list a{ 14 display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid #666; 15 } 16 /*解决在IE6/7下，ul的子元素li不能在同一行显示的问题*/ 17 .list li{*display:inline;*zoom:1;} 18 19 /*下面的样式是为了去掉display:inline-block之间的空隙。*/ 20 /*1--在父级元素上添加font-size为0，为了不影响子元素的font-size，我们也要在子元素.list li 和 .list a添加{font-size:12px}来覆盖父级元素的font-size*/ 21 .list{font-size:0;}.list li{font-size:12px;}.list a{font-size:12px;} 22 23 /*2--Safari5不支持font-size:0，解决方法：在父级元素上使用 letter-spacing:-5px，为了不影响子元素需要在子元素重新设置值回默认值*/ 24 @media screen and (-webkit-min-device-pixel-ratio:0){ 25 .list{letter-spacing:-5px;} 26 } 27 .list li{letter-spacing:normal;}.list a{letter-spacing:normal;} 28 29 /*3--使用*word-spacing:-1px; 解决IE6，7下产生的1px间隙bug，如下在父级元素多添加如下代码.list{ *word-spacing:-1px; }。同样为了使子元素不受影响需要添加word-spacing的默认值。*/ 30 .list{*word-spacing:-1px;} 31 .list li{ *word-spacing:normal;} .list a { *word-spacing:normal;}
2、display:table-cell;
display:table-cell 目前IE8+浏览器都支持，IE6，7不支持，我们都知道单元格有一些特别的属性，比如图片垂直居中，文字垂直居中等。但是display:table-cell不能与float:left或者position:absolute属性等同用。对margin值无反应，支持padding属性。
demo1 - display-table-cell-图片居中显示：
兼容性：兼容到IE8+，Chrome，Firefox
html：
1 <div class="box"> 2 <ul> 3 <li><img src="bg.png"></li> 4 <li><img src="bg.png"></li> 5 </ul> 6 </div>
css：
1 /*reset-style*/ 2 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} 3 ul,ol{list-style:none;} 4 body{font-size:12px;font-family:"Microsoft yahei";} 5 a{text-decoration:none;} 6 7 /*基本页面样式*/ 8 .box{width:500px;height:300px;margin:30px auto;border:1px solid #ccc;} 9 ul{width:100%;height:100%;} 10 ul li{width:250px;height:300px;;display:table-cell;text-align:center;vertical-align:middle;} 11 ul li:first-child{border-right:1px solid #ccc;}
demo2 - display-table-cell-两栏自适应布局：
兼容性：兼容到IE7+，Chrome，Firefox
html：
1 <div class="box"> 2 <ul class="list"> 3 <li><a href="#">首页</a></li> 4 <li><a href="#">文章列表</a></li> 5 <li><a href="#">评论列表</a></li> 6 <li class="about"><a href="#">关于我</a></li> 7 </ul> 8 <div class="content"> 9 <p class="head">标题：上海欢迎你！</p> 10 <p>简介：上海是一座国家历史文化名城，拥有深厚的近代城市文化底蕴和众多历史古迹。江南传统吴越文化与西方传入的工业文化相融合形成上海特有的海派文化，上海人多属江浙民系使用吴语。早在宋代就有了“上海”之名，1843年后上海成为对外开放的商埠并迅速发展成为远东第一大城市，今日的上海已经成功举办了2010年世界博览会、中国上海国际艺术节、上海国际电影节等大型国际活动。</p> 11 </div> 12 </div>
css：
1 /*reset-style*/ 2 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} 3 ul,ol{list-style:none;} 4 body{font-size:12px;font-family:"Microsoft yahei";} 5 a{text-decoration:none;} 6 7 /*基本页面样式*/ 8 .box{width:100%;margin:30px auto;padding:20px;border:1px solid #ccc;overflow:hidden;box-sizing:border-box;*behavior:url(boxsizing.htc);} 9 /* *behavior:url(boxsizing.htc);解决IE7不支持box-sizing:border-box;的问题 */ 10 .list{width:200px;background:#eee;float:left;} 11 .list li{height:35px;line-height:35px;display:block;border-bottom:1px solid #ccc;} 12 .list .about{border:0;} 13 .list li a{display:block;text-align:left;font-size:16px;padding-left:35px;color:#333;} 14 .content{display:table-cell;*display:inline-block;font-size:14px;padding-left:20px;} 15 .content .head{line-height:30px;font-weight:bold;} 16 .content p{line-height:22px;}
