文档章节

ie css margin auto 不居中解决方案

mj4738
 mj4738
发布于 2013/06/25 09:24
字数 1223
阅读 540
收藏 3
  一般在将div居中显示时,使用css : 
divX {margin:0 auto;} 
此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: 
<div id="cnbruce">margin: 0 auto 看看内容居中否</div> 

如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明文本居中,即 

<style> 
   body{
       text-align:center
   } 
   #cnbruce{
       width:500px; 
       background-color: #ccc; 
       margin: 0 auto
   } 
</style>
<div id="cnbruce">margin: 0 auto 看看内容居中否(加了body文本居中)</div> 
然后,单个div的CSS居中,非要扯上<body>? 
于是在不采用“<body>”声明文本居中的情况下,将DOCTYPE声明加上,立马有效果 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<style> 
    #cnbruce{
        width:500px; 
        background-color: #ccc;
        margin: 0 auto
    } 
</style>
<div id="cnbruce">margin: 0 auto 看看内容居中否(加了DOCTYPE声明)</div> 
其实原理都知道,就是因为用这个“懒人”的HTML调试框,懒得去输入些忘却的东西,到头来还以为真相就是如此呢。。。 
同样,关于“一边固定,一边自动扩展”的例子,加与不加在IE效果完全不同。 
如下是不加的情况: 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS布局</title> 
<style type="text/css"> 
<!-- 
body {margin:0;} 
#dv1 {background-color: #3399FF;float: left;width: 280px;} 
#dv2 {background-color: #FFCC00;width:100%;} 
--> 
</style> 
</head> 
<body> 
<div id="dv1"> 
<pre>#dv1 {background-color: #3399FF;float: left;width: 280px;} </pre> 
</div> 
<div id="dv2"> 
<pre>#dv2 {background-color: #FFCC00;width:100%;}</pre> 
</div> 
</body> 
</html>
如下是添加了DOCTYPE声明 

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS布局1</title> 
<style type="text/css"> 
<!-- 
body {margin:0;} 
#dv1 {background-color: #3399FF;float: left;width: 280px;} 
#dv2 {background-color: #FFCC00;width:100%;} 
--> 
</style> 
</head> 
<body> 
<div id="dv1"> 
<pre>#dv1 {background-color: #3399FF;float: left;width: 280px;} </pre> 
</div> 
<div id="dv2"> 
<pre>#dv2 {background-color: #FFCC00;width:100%;}</pre> 
</div> 
</body> 
</html>
下次再也不信HTML调试框了,还是用软件,呵呵。 

什么是DOCTYPE  
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。 
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。 
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。 

XHTML 1.0 提供了三种DTD声明可供选择 : 
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我们选择什么样的DOCTYPE  
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。 
:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。 
打个比方 :人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。 
补充 :DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。 
于是改了个transitional型的DTD声明,可是div仍然没有居中,再扫了一遍文章,抓到文章最后的重点:DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。把声明前面的一切障碍扫除,刷新页面,大功告成。

本文转载自:http://www.jb51.net/css/66889.html

mj4738

mj4738

粉丝 294
博文 489
码字总数 119327
作品 0
崇明
高级程序员
加载中

评论(2)

mj4738
mj4738

引用来自“让子弹飞一会儿”的评论

以前碰到过,不过没有楼主这么认真!赞之!

转发的,现在碰到这个问题
子弹兄
子弹兄
以前碰到过,不过没有楼主这么认真!赞之!
[分享] 纯CSS完美实现垂直水平居中的6种方式

前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是...

没错就是酱紫
2016/07/29
24
0
CSS垂直居中

44年前我们把人送上月球,但在CSS中我们仍然不能很好实现垂直居中——@James Anderson 让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:...

WolfX
2016/04/25
56
0
div样式在IE下margin:0 auto不居中多种解决方法

正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。 正常情况下需要将div居中显示时,使用Css样式...

coldg
2012/08/29
0
0
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
05/11
0
0
CSS兼容IE/Firefox要点

首先我们说说firefox和IE对CSS的宽度显示有什么不同: 其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explor...

黄平俊
2009/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

redis数据结构

1.数据结构 1.1 简单动态字符串 sds struct sdshdr { int len; // buf数组中记录的字符串长度 int free; //bug数组未使用的长度 char buf[]; //字节数组,用于保存字符串...

Funcy1122
39分钟前
0
0
通过ip获取真实地址

package util;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;import org.apache.commons.lang3.StringUtils;import org.apache.http.HttpResponse;......

lifes77
今天
2
0
解决nginx 出现 413 Request Entity Too Large的问题

php.ini 文件已经设置了附件大小和表单提交大小为128M upload_max_filesize = 128M post_max_size = 128M 然而nginx还是报 413 Request Entity Too Large 错怎么办 打开/etc/nginx/sites-av...

Marhal
今天
1
0
Vue 服务端渲染(SSR)

Vue 服务端渲染(SSR) 什么是服务端渲染,简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。于传统的SPA(单页应用)...

Jack088
今天
1
0
Java 计算日期间天数与日期推算等操作

package com.yh.emmm.pattern;import java.time.LocalDate;/** * 计算两个日期之间的天数 * * @author 枫茗丿love */public class CountDaysUtils { /** * 两...

yh500
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部