maoting

浏览: 47201 次
性别:
来自: 北京

最近访客更多访客>>

iy2017

eyeti123

小动物不困

吴小帅啊

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css常用效果处理（兼容多浏览器）

博客分类：

以下是个人见解，欢迎拍砖。

参考文件： http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

图片文字的垂直居中

解决方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    * {padding:0; margin:0;}
    ul{list-style:none;width:800px;}
    li{border:1px solid #000;float:left;width:120px; height:200px;margin-right:10px;}
    
    .plain li {display:table;}
    .plain li div {display:table-cell; vertical-align:middle;}
    
    .ie6Ie7 li div {position:relative;top:50%; float: left}
    .ie6Ie7 li div div{top:-50%;}

    .all li {display:table; }
    .all li div {display:table-cell; vertical-align:middle;*position:relative;*top:50%; *float: left}
    .all li div div{*top:-50%;}
</style>
</head>
 
<body>其它浏览器的垂直居中问题（除IE6、IE7,二者不支持display:table和display:table-cell属性）
<ul class="plain">
    <li><div>Surprise double take Surprise double take</div></li>
    <li><div><img src="mm1.jpg"  alt="" title="" /></div></li>
    <li><div><img src="mm2.jpg"  alt="" title="" /></div></li>
    <li style="width:300px;"><div><img src="mm1.jpg"  alt="" title="" /><img src="mm2.jpg"  alt="" title="" /></div>
    </li>
</ul>
<div style="clear:both"></div>
<br>
<h2>IE6、IE7的垂直居中问题</h2>
<ul class="ie6Ie7">
    <li><div><div>Surprise double take Surprise double take</div></div></li>
    <li><div><div><img src="mm1.jpg"  alt="" title="" /></div></div></li>
    <li><div><div><img src="mm2.jpg"  alt="" title="" /></div></div></li>
    <li style="width:300px;"><div><div><img src="mm1.jpg"  alt="" title="" /><img src="mm2.jpg"  alt="" title="" /></div></div>
    </li>
</ul>

<div style="clear:both"></div>
<br><br><br><br>
<h2>兼容所有浏览器的垂直居中问题</h2>
<ul class="all">
    <li><div><div>Surprise double take Surprise double take</div></div></li>
    <li><div><div><img src="mm1.jpg"  alt="" title="" /></div></div></li>
    <li><div><div><img src="mm2.jpg"  alt="" title="" /></div></div></li>
    <li style="width:300px;"><div><div><img src="mm1.jpg"  alt="" title="" /><img src="mm2.jpg"  alt="" title="" /></div></div>
    </li>
</ul>
</body>
</html>

效果图（FireFox）：

两栏自适应布局

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title><script></script>
		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box{width:60%; margin:20px auto; padding:20px; background:#f5f5f5;}
		h3{
			width:60%; 
			margin:10px auto;
		}
		.content{
			display:table-cell;  
			/*IE6、IE7 触发haslayout实现效果*/
			zoom:1;
		}
		</style>
	</head>
	<body>
		<h3>用法三：两栏自适应布局<br>正常情况下，图片使用float后，文字对其有包裹特性，当文字高度超过图片时，文字在图片下边显示。<br>
			然而本例子实现的效果是，即使文字超过图片，文字也不会再图片下边显示
			针对IE6、IE7而言，实现原理是：通过display:inline-block触发haslayOut属性<br>
			针对其它浏览器使用diplay:table-cell实现效果</h3>
		<div class="box">			
		    <a href="#prettyGirl" style="float:left;margin-right:10px;"><img border="0" src="mm2.jpg" /></a>
		    <div class="content">
		        <p><a href="#prettyGirl">大美女一枚</a> 来自上海</p>
		        <p class="mt5">签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p>
		        <p class="mt5">微博：</p>
		    </div>
		    <div style="clear:both"></div>
		</div>	
		<div class="box">
		    <a href="#prettyGirl" style="float:left;margin-right:10px;"><img border="0" src="mm1.jpg" /></a>
		    <div class="content">
		        <p><a href="#prettyGirl">大美女一枚</a> 来自上海</p>
		        <p class="mt5">签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p>
		        <p class="mt5">微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？</p>
		    </div>
		    <div style="clear:both"></div>
		</div>	
		
	</body>
</html>

效果图（FireFox）

cssAll.zip (13 KB)
下载次数: 4

查看图片附件

分享到：

z-index 详解 | javascript方法总结_Array

2012-10-19 10:44
浏览 672
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css常用效果处理（兼容多浏览器）

图片文字的垂直居中

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css常用效果处理（兼容多浏览器）

图片文字的垂直居中

评论

发表评论

相关推荐

iconfont font_1

iconfont font

IE6,IE7绝对定位元素神秘消失或被遮挡的解决

css float文字的显示问题（兼容性）

white-space:nowrap

css3 target

css bugs

使用CSS3的appearance属性改变元素的外观

css 技巧

CSS3 Word-wrap word-break white-space（待整理）

浏览器兼容问题

CSS竖直对齐vertical-align属性详解

IE6 fixed min-height max-height

ie6 bugs-2

中间div滚动

font-size:0对取消img的右侧和下侧margin

工作总结

IE6 BUG汇总

hasLayout

各浏览器对常用行内替换元素的 'baseline' 位置理解不同

最近访客更多访客>>