转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html

最近在开发项目的时候,发现在火狐浏览器中设置外容器margin:0 auto是可行的。

但是到了IE6,IE7,IE8则出现了不能居中的现象。

开始也没怎么在意,刚刚在浏览网页的时候看到这篇文章,帮我解决了这个疑问。

解决方案如下:

很多人都忽略了“文档类型”。下面就是正确设置的文档类型了。

<!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”>

另外,如果你使用的IDE是Dreamweaver,还可以通过调整页面属性来解决。该选项在菜单中的修改–>页面属性。

详细设置如下图:

Unicode 标准化表单下面的“包括Unicode签名”选项不要打钩。其他调整成如上的设置即可解决。

知识补充:

关于网页声明,参考:

HTML <!DOCTYPE> 标签

定义和用法

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或XHTML 规范。

该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

以下面这个 <!DOCTYPE> 标签为例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在上面的声明中,声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

提示和注释:

注释:<!DOCTYPE> 标签没有结束标签!

HTML

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

HTML Strict DTD

如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时,请使用此类型:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Frameset DTD

Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML

XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

XHTML Strict DTD

如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 XHTML 的呈现特性时,请使用此类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD

当您希望使用框架时,请使用此 DTD!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

如需检查你是否编写了带有正确 DTD 的合法 XHTML 文档,您可以把您的 XHTML 页面链接到一个 XHTML 验证器。

margin:0 auto在IE中失效的解决方案的更多相关文章

  1. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  2. html页面docutype前面出现字符会导致IE678 margin:0 auto;失效

    html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效

  3. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  4. CSS中设置margin:0 auto; 水平居中无效的原因分析

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...

  5. css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  6. CSS中margin: 0 auto;样式没有生效

    问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? ...

  7. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  8. 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  9. margin:0 auto;不居中

    margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...

随机推荐

  1. VC++ 文件系统

    using namespace System; using namespace System::IO; void ShowHelpMsg(){ Console::WriteLine(L"本程 ...

  2. OD调试篇7--笔记及解题报告

    MFC:微软基础类库(英语:Microsoft Foundation Classes,简称MFC)是一个微软公司提供的类库(class libraries),以C++类的形式封装了Windows AP ...

  3. excel导入导出

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using FS.Exten ...

  4. linux 启动weblogic的某服务报错

    问题如标题所示, 错误信息主要包括: weblogic.store.PersistentStoreException: [Store:280073]The file store"WLS_DI ...

  5. 在IOS输入框中 键盘上显示“搜索”

    移动端web页面上使用软键盘时如何让其显示“前往”(GO)而不是换行?‘ 用一个 form 表单包裹住就会显示前往,单独的一个 input 就会提示换行.下面是测试地址: 有表单:https://js ...

  6. Asm.Def点大兵

    syzoj上的题,收货很多,orz天天学长 原题: Asm.Def奉命组建一支m人的特种作战小队前往圣迭戈.他有n名候选人,可以在其中任意挑选.由于小队中每个人都有独特的作用,所以次序不同的两种选法被 ...

  7. C++ Primer 第5版

    说起Lippman的C++ Primer,我总是有种特殊感情.这本书既是我进入C++领域的敲门砖,也是我第一次在网络上发表技术文章的对象.当年读书笔记中的青涩迷惘和年少轻狂都还历历在目,转眼已经从第三 ...

  8. Restful 支持 自定义序列化

    [ServiceContract] [ServiceKnownType(typeof(HRAwardObject))] [ServiceKnownType(typeof(WorkflowBasicIn ...

  9. 基于Python的接口测试框架

    分析 接口是基于HTTP协议的,那么说白了,就是发起HTTP请求就行了,对于Python来说比较简单.直接使用requests就可以很轻松的完成任务. 架构 整个框架是比较小的,涉及的东西也比较少,只 ...

  10. python反射的妙用

    反射的简单含义: 通过类名获得类的实例对象 通过方法名得到方法,实现调用 实例: import sys class Webserver(object): def __init__(self,host, ...