`
accpxudajian
  • 浏览: 451972 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

浏览器兼容的text-align写法

    博客分类：
  • CSS
 
阅读更多

 

<html>
<head>	

<style>
	html,body{
		text-align: -moz-center !important;/*ff的样式*/
		text-align:center;/*IE的样式，而且和上边ff的样式的顺序不能调换，否则IE样式失效*/
	}
	
	.magixBoxCon{
		height:200px;
		width:300px;
		border:1px solid red;
		text-align:center;/*IE*/
		margin:0 auto;/*chrome的要求*/
	}
	p{
		text-align:left;
		width:600px;
		margin:0 auto;/*chrome的要求*/
	}
</style>
</head>
<body>
	<p>
		要给id="target"的div实现在IE，ff,chrome下的text-align兼容，需要注意一下几点:<br/>
		1、包含target的容器元素样式：text-align: -moz-center !important; 这个是火狐下的居中样式，而IE下的样式则是标准的：text-align:center;
			特别注意的是，这两个样式的前后顺序不能调换，否则的话IE的居中样式则丢失，变成左对齐。<br/>
		2、要在chrome下看到target居中，还要做的一个工作就是给target本身添加一个样式：margin:0 auto,就是左右的margin使用auto；这个是chrome最特殊的地方
			(还有得网友说，必须给target本身添加widht属性，但是我测试了，不加也没关系)
	</p>
	<div id="target" class="magixBoxCon">内容居中</div>
</body>
</html>
分享到：
| EasyTip 简单Tip提示窗口
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics