`
NobleBaron
  • 浏览: 43820 次
社区版块
存档分类
最新评论

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

阅读更多

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

 

半宽度调整回来了。

 

 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

分享到:
评论

相关推荐

    Jsp中如何让图片在div中居中

    在讨论JSP页面中图片居中的问题时,首先需要掌握一些基础的CSS布局知识,包括display属性的使用、垂直居中的方法、margin属性的自动居中技巧以及W3C标准对页面渲染的影响。 当涉及到在div中居中一张图片时,CSS是...

    利用margin属性将一个div水平居中

    - **margin属性**: margin是CSS中用于设置元素的外边距的简写属性。它相当于同时设置margin-top、margin-right、margin-bottom和margin-left四个方向的外边距。 - **简写形式**: margin值可以简写为一个值(四个边...

    jsp中使用frameset框架 边框固定不让更改边框的大小.docx

    要实现边框不可调整大小,我们需要在`frameset`中的`frame`标签内添加`noresize`属性,并将其值设置为`noresize`。这将禁止用户通过拖拽的方式改变框架的大小。例如: ```html ,*" frameborder="0"&gt; ...

    jsp网上书店项目源码

    2. 属性和值:如color、font-size、margin等,定义元素的样式。 3. 盒模型:理解内容区域、内边距、边框和外边距的关系,对布局至关重要。 4. 布局方式:包括流式布局、网格布局和响应式布局等,适应不同屏幕尺寸。 ...

    JSP经典教程

    ### JSP经典教程知识点解析 #### 一、JSP动态网页设计基础 JSP,全称为Java Server Pages,是一种基于Java技术的服务器端脚本语言,用于创建动态网页。它结合了HTML、XML和Java代码,允许开发者在网页中嵌入Java...

    JSP应用笔记总结——我的笔记

    --注释信息--&gt;`:注释标签,用于在代码中添加注释,不被浏览器解析。 - `&lt;marquee&gt;`:滚动标签,常用于创建滚动文本或图像,支持多个属性如`direction`(滚动方向)、`width`和`height`(尺寸)、`behavior`(滚动...

    css,jsp和xml资料

    3. 盒模型:CSS中的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin),它影响元素的尺寸和空间布局。 4. 层叠与继承:当多个样式规则应用于同一元素时,CSS会根据层叠规则决定最终...

    网页设计笔试题

    - **解析**: 在CSS中,margin属性的顺序为:上(top)、右(right)、下(bottom)、左(left)。如果只指定一个值,则四个方向都使用这个值;如果指定两个值,则第一个值应用于上和下,第二个值应用于左和右。

    jsp中使用frameset框架 边框固定不让更改边框的大小

    当我们在`&lt;frame&gt;` 标签中添加 `noresize="noresize"` 属性时,就禁止了用户对框架边框的调整操作。例如: ```html &lt;frame name="sel" src="XXX.jsp" marginwidth="5" marginheight="5" scrolling="Auto" ...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    在Web开发中,确保页面在不同浏览器间具有良好的兼容性是一项重要的任务。针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **...

    jsp+ajax自动刷新实例

    ### jsp+ajax自动刷新实例知识点详解 #### 一、技术背景与原理 在Web开发领域,JSP(JavaServer Pages)与AJAX(Asynchronous JavaScript and XML)都是实现动态网页的重要技术。JSP用于创建动态网页,而AJAX则...

    自考网页设计与制作试卷及答案(一).docx

    - **知识点**:BOX模型中margin属性的顺序是什么? - **解释**:在CSS的盒模型中,`margin`属性的顺序通常是“顶、右、底、左”,即顺时针方向指定边距。 ### 25. HTML超级链接颜色 - **知识点**:`&lt;body vlink=?&gt;`...

    jQuery+jsp下拉框联动获取本地数据的方法(附源码)

    在本文中,我们将探讨如何使用jQuery和jsp实现下拉框联动来获取本地数据。这个功能在许多Web应用程序中都很常见,它可以减少不必要的数据传输,提高用户体验。为了实现这个功能,我们将利用Ajax技术来异步加载数据,...

    网页设计.docx

    客户端脚本则直接在用户设备上运行,不直接操作数据库,而是处理浏览器中的数据,如缓存数据,减少服务器负载。 总结来说,网页设计涵盖了从URL解析、HTTP请求到浏览器解析渲染的全过程,涉及到DNS、HTTP协议、HTML...

    Java实现文本编辑框上传.txt

    接下来将详细解析文件中的关键知识点。 ### 1. JSP (JavaServer Pages) 文件结构 JSP 文件是 JavaServer Pages 的简称,是一种基于 Java 的动态网页技术标准。在该文件中,我们看到了 JSP 文件的基本结构: - `;...

    实现异地上传

    - 通过`parseRequest(request)`方法解析请求中的文件数据。 - 遍历`List`集合,获取每个文件的信息,并展示在页面上。 #### 三、注意事项 1. **安全性**:在处理文件上传时需要考虑安全性问题,例如限制文件类型、...

    jquery参数传递

    ()%&gt;/bjtf/ctpf/demo/MyJsp2.jsp" style="margin-bottom:2px;"&gt; ;"&gt; ;"&gt; &lt;!-- 表单字段 --&gt; &lt;td width="15%"&gt;&lt;label for="cname"&gt;名称:&lt;/label&gt;&lt;/td&gt; &lt;td width="35%"&gt;&lt;input id="cname" name="name" size=...

    jquery实现的购物网站

    - JSTL SQL标签库:用于执行数据库查询,但不推荐在生产环境中直接使用,因为有安全风险。 - JSTL JSTL EL(Expression Language)结合使用,可以更方便地在JSP页面上表达和处理数据。 4. **购物网站功能** - ...

Global site tag (gtag.js) - Google Analytics