浏览器
双核浏览器
游戏浏览器
高速浏览器
视频浏览器
IE浏览器
浏览器周边
手机浏览器
安卓游戏
音乐舞蹈
养成游戏
儿童游戏
仙侠手游
角色扮演
策略塔防
休闲益智
动作冒险
飞行射击
模拟经营
体育运动
赛车竞速
网络游戏
安卓软件
资讯阅读
生活服务
影音播放
购物理财
效率办公
趣味娱乐
交通出行
学习教育
摄影图像
在线音乐
系统工具
网络购物
聊天工具
安全杀毒
图片编辑
新闻资讯
软件资讯
游戏资讯
手机教程
手游攻略
游戏攻略
软件教程
IE专区
安卓专题
文章合集
电脑软件专题
安全软件
杀毒软件
系统安全
加密解密
防火墙
远程控制
木马查杀
影音软件
网络电视
视频播放
音乐播放
视频制作
音频编辑
录音录像
教育学习
外语学习
教育管理
早教启蒙
在线课堂
成人教育
资格考试
聊天社交
即时通讯
视频聊天
在线交友
变声器
表情包
办公软件
线上会议
文档管理
行业管理
考勤打卡
应用工具
输入法
下载工具
时钟日历
记事本
文件管理
计算器
编程开发
编程工具
JAVA相关
加壳脱壳
编程控件
数据库
网页源码
软件开发
补丁制作
系统美化
桌面制作
壁纸大全
系统主题
屏幕保护
桌面辅助
系统软件
系统优化
备份还原
系统检测
U盘工具
磁盘工具
驱动补丁
图文处理
图片素材
图像处理
图片制作
图片压缩
电子相册
抓图工具
其他软件
电子书籍
模拟器
辅助工具
交通出行
手机管理
其他工具
素材下载
字体素材
PPT素材
专区
文章合集
软件
游戏
浏览器
安卓专题
软件
游戏
浏览器
IEfans/ IE专区/ IE动态 /ie css margin auto 不居中解决方案

ie css margin auto 不居中解决方案

2023-06-28 14:30:01 编辑:匿名

一般在将div居中显示时,使用css
divX {margin:0 auto;}
此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:
div id=cnbrucemargin: 0 auto 看看内容居中否/div
如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体body声明文本居中,即

复制代码代码如下:
style
body{text-align:center}
#cnbruce{width:500px; background-color: #ccc; margin: 0 auto}
/style

div id=cnbrucemargin: 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=cnbrucemargin: 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" /
titleCSS布局/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" /
titleCSS布局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文档最顶部,在所有代码和标识之上。把声明前面的一切障碍扫除,刷新页面,大功告成。

相关推荐

浏览器更新