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

最新推荐文章于 2024-10-10 09:38:48 发布

maotingmaoting

最新推荐文章于 2024-10-10 09:38:48 发布

阅读量114

点赞数

分类专栏： css 文章标签： xhtml php

本文链接：https://blog.csdn.net/maotingmaoting/article/details/84320089

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

参考文件： 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）