jsp中对margin属性不解析解决办法

NobleBaron

浏览: 43951 次

最近访客更多访客>>

m635674608

猪猪猪1111

ylm_v

訫随念

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jsp margin 不居中 ie8

在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"/>（明白人都知道加在什么地方）

这个只是渲染的过程。实际上不是每个页面都通用，至少我自己加了就不行。原因我也不明。。不过既然有这样的话肯定有其所用。

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得到的，其他宽度也相应的方法得到这个值，这样就将多移动过去的一

半宽度调整回来了。

4.网站程序解决
这种方法跟第三点有些地方还是不同的，请仔细比较。
CSS：
<style type="text/css">

body{text-align:center; width:100%;}
#container{
text-align:left;
width:1000px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}

</style>
<div id="container"> 这个方法是在所有浏览器中都有效的方法: 这个方法是在所有浏览器中都有效的方法: 这个方法是在所有浏览器中都有效的方法:
</div>

我用的基本就是这个方法。其实直接对body定义一个宽度再margin：0 auto 就可以居中了。其他页面都测试通过。

5.在客户端浏览器解决

其实解决方法很简单，但是一般情况下客户是不知道这样用的，所以最好在网站程序中就设计好处理办法。
用IE8浏览器打开你的网站，如果发现错位问题，请不用惊慌。在菜单栏上，打开“工具”选项，在下拉菜单里找到“兼容性视图”，勾选上，你再看，是不是网站没再错位了。

本文大部分转载自：http://www.cnblogs.com/Kennyso/archive/2011/11/16/2250774.html

分享到：

Criteria查询 | 相信未来

2012-09-07 16:33
浏览 2777
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论