日期:2014-05-16 浏览次数:20378 次
在jsp中IE8对margin:0 auto;这个CSS好像不再有用了,页面不能居中啦。
在jsp中文档类型定义是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
?在html中文档类型定义为:
?
<!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">
?在html中margin可解析,使用没有问题。
?
解决办法:
1.网易的解决方案(我喜欢)
??? <meta http-equiv="X-UA-Compatible" content="IE=7"/>(明白人都知道加在什么地方)
??? <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
?
这个只是渲染的过程。实际上不是每个页面都通用,至少我自己加了就不行。原因我也不明。。不过既然有这样的话肯定有其所用。
?
2.简单高效的方法
??? 使用<center></center>标签。这是在html4.0文档中找到的宝贝,只要用它包裹div就可以在所有浏览器中实现居
中。但是他同时也让div内部的元素居中显示。所以使用时还要为div单独设定文本对齐。此方法在我的IE8浏览器兼容
性视图中测试通过。
这个会将所有的行内元素全部居中。之后需要对特别的位置重新设置过样式。用于修改不方便。。设计的时候可以使用试试。。
?
3.常见的方法
CSS:?
<style type="text/css">?
#container{?
position:relative;?
width:1000px;?
left:50%;?
margin-left:-500px;?
background-color:#ffffff;?
border:1px solid #cccccc;?
}
</style>?
这段代码在IE8兼容视图中有效,说明如下。
#container 控制居中的div容器名,一般为最外层的div。
position:relative; 说明它的位置要设置为固定的。?
left:50%; 说明这个div距左边距离是浏览器宽度的一半。
margin-left:-500px;这里-500px是由width/2得到的,其他宽度也相应的方法得到这个值,这样就将多移动过去的一
?
半宽度调整回来了。
?