<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>
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
