margin:0 auto在IE中失效的解决方案
转自: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 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 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中失效的解决方案的更多相关文章
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)
body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
- html页面docutype前面出现字符会导致IE678 margin:0 auto;失效
html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
- CSS中设置margin:0 auto; 水平居中无效的原因分析
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...
- css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?
auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...
- CSS中margin: 0 auto;样式没有生效
问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;
声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...
- margin:0 auto;不居中
margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...
随机推荐
- idea中如何配置tomcat
这几天想通过JDBC驱动使用MySQL数据库,但老是运行不成功,但是写成java就没有问题,于是想到是不是服务器没配置好 idea中配置tomcat的步骤如下 1:File->Settings. ...
- 导入别人的flex项目出现的问题
1.unable to open 'D:/flex-projects/RoadService/WebContent/WEB-INF/flex/services-config.xml' 这种情况是因为别 ...
- 《JavaScript模式》第6章 代码复用模式
@by Ruth92(转载请注明出处) 第6章:代码复用模式 GoF 在其著作中提出的有关创建对象的建议原则: -- 优先使用对象组合,而不是类继承. 传统模式:使用类继承: 现代模式:"类 ...
- notifyDataSetInvalidated()跟notifyDataSetChanged()的区别
public void notifyDataSetChanged(): 通过一个外部的方法控制,如果适配器的内容改变了,那么就会强制调用getView来刷新每个Item的内容.这个方法内部实现了在每个 ...
- WOJ-1203
Description 有一组数,很多很多个数,里面有一个数出现了超过一半次,请你把它找出来 Input 先是一个N (N<=1000000),然后接下来一行N个数,请一直处理到EOF. Out ...
- distributed 以及 distributional 语义表达的区别
昨天在审核资讯翻译的时候遇到这两个单词,文章里讲的也不清楚,感觉翻译的也不到位.今天就单独拿出来比较一下吧.尽管这两个单词相似,它们的具体实现方法还是有很大区别的. Distributional wo ...
- codeforces194a
link:http://codeforces.com/contest/334/problem/A 很有意思的一道构造题.发现CF上经常出这种不难但是很不错的构造题. #include <iost ...
- oracle 左边填充函数使用
左边填充 select lpad('abcde',10,'0') from dual; ==>00000abcde select lpad('abcde',10,'x') from dual;= ...
- 关于jQuery中的submit()函数
关于jQuery中的submit()函数(绑定event handler or 触发event?) 今天在敲代码的时候无意间碰到了一个比较绕的问题(一个小师弟问的问题),思前想后都不明白,上午百度.谷 ...
- mac android studio 编译时报Class JavaLaunchHelper is implemented in both
Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Cont ...