div层火狐居中在ie不居中问题解决

最新推荐文章于 2021-06-08 22:27:26 发布
最新推荐文章于 2021-06-08 22:27:26 发布
阅读量485 收藏
点赞数
分类专栏： 前台技术 文章标签： ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014481497/article/details/48807915
版权 
div层火狐居中在ie不居中,在IE6/7/8中用margin:0 auto;无法实现居中的解决办法

一般的我们所说的居中有两种，层的居中和层内的居中，层的居中我一般都用：margin:0 auto;(或者 margin-left: auto;margin-right: auto;) 这样的写法；层内的居中（我一般都用于层内的文字）：text-align:center;  

这段代码在FF中可以居中，而在IE6/7/8中均不能居中。换成：MARGIN-RIGHT: auto; MARGIN-LEFT: auto;也一样，而且，居右margin:0pt 0pt 0pt auto;的也失效了

问题并不在CSS而在XHTML网页本身

需要加上这样的代码才能使得上述设置有效果:

 代码如下 复制代码

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

如果没有这句话，在IE6/7/8中只用margin:0 auto;是无法实现居中的，而在FF中却可以。

如果加了doctype声明，则在一个body下的div，只用margin:0 auto;即可在IE和FF中都实现居中。

例

DIV在整个body中水平居中：

 代码如下 复制代码

#DivComment{
    position:absolute;
    top: 90%;
     left: 45%;
    width:40%;
    margin:0 0 0 -240px;
    padding: 10px 10px 0px 0px; 
}

实例

DIV在另一个DIV中水平居中：

 代码如下 复制代码

#div1{
TEXT-ALIGN: center;
}
#div2{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto; 
height:200px;
background:#F00;
width:400px;
}

在要居中的div的父级元素（未必是div，可以是ul、li等）中设置TEXT-ALIGN: center;即可实现此div居中，但仅限于IE6&IE7。在此div中加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;或者margin: 0 auto;即可实现在firefox中也居中

xiaopan118
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div中子div在firefox ie 水平居中对齐
12-12
在本例中，我们讨论的是如何使一个内嵌的`<div>`元素在它的父`<div>`中水平居中对齐，同时兼容Firefox和Internet Explorer（IE）浏览器。这个问题涉及到CSS的布局特性，主要包括`text-align`属性和自动外边距（`...
完全纯css实现div自适应居中兼容IE7 Chrome FireFox
12-13
2. IE7、8 下rgba属性会失效，所以如果要做半透明要新加一个div，这个步骤我偷个懒就省了哈哈，重点是中间的div大笑 3. 对于弹出层，各位针对自己的情况设置z-index，这里我没有设置了 4. IE6没有测试，抱歉= = ...
做网页在IE中能够居中但在火狐Firefox中不能居中解决办法
cherayliu的专栏
12-20 1225
body {     background-color:#84D0F9;     margin:0 auto;     padding:auto;     border:none;         text-align:center;     width:1024px;     height:1001px; } 如红色所示，必须设定宽度和高度，margin:0 auto;才起作用
IE中页面不居中，火狐谷歌等正常
雨林
05-18 5554
问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是 这句话， 默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档. 问题并不在CSS而在XHTML网页本身.
（转）浏览器ie层或table居中和Firefox层或table不居中解决方法
weixin_34344403的博客
10-09 209
ie里面显示是居中的,但是在firefox里就变左对齐了。这是ie与firefox浏览器解析css样式的区别，两者不完全兼容。参考网上资料后，飞龙决定总结一下ie浏览器里层table居中而Firefox浏览器里层table不居中解决方法，修订参考地址在：http://feilong.org/ie-Firefox-div-table-center，与朋友一起交流学习。 一、ie浏览器 层或table...
自制表格在IE7中能居中但在火狐中不可以居中的解决方法
08-05 89
今天在做一个自制表格式发现了一个问题，改了许久没找到解决方法，于是就百度了一下，原来align在IE中可以居中但在火狐中怎不可以。解决方法是：把原来用到align：center或text-align:center的地方用在对应的style里面用margin: 0px auto替换。这样既可以在火狐中居中也可以再IE中居中。以下是具体代码： 这个是我第一次写的居中...
div嵌套居中解决办法FireFox火狐和IE
llying
09-10 290
div嵌套居中解决办法FireFox火狐和IE DIV,嵌套剧中,FireFox,火狐,IE 今天遇到到个问题就是div中嵌套div在火狐下面不能剧中问题 其实问题很简单 就是我希望父层div下面的内容可以居中显示，其中包括div [code="html"] 123 456 789 [/code] 不过这段代码在firefox下面...
html中div不在火狐居中,div层火狐居中在ie不居中
weixin_32537261的博客
06-08 88
本文章来总结关于div层火狐居中在ie不居中,在IE6/7/8中用margin:0 auto;无法实现居中的解决办法。一般的我们所说的居中有两种，层的居中和层内的居中，层的居中我一般都用：margin:0 auto;(或者 margin-left: auto;margin-right: auto;) 这样的写法；层内的居中(我一般都用于层内的文字)：text-align:center;这段代码在F...
html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
weixin_39714528的博客
06-08 535
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法，主要包括使用line-height垂直居中，清除容器浮动，不让链接折行，始终让Firefox显示滚动条等内容。Firefox嵌套CSS中div标签的居中问题的解决方法假定有如下情况：viewplaincopytoclipboardprint?div>div>div>div>如果要实现b在a中居中...
chrome居中但ie不居中的解决方法
09-25
标题“chrome居中但ie不居中的解决方法”和描述提到了一个具体问题，即在Chrome浏览器中元素能正常居中，但在IE中却无法居中。这个问题主要涉及到CSS样式和XHTML文档类型的声明。 首先，让我们来看看如何使用CSS使...
css浏览器兼容
zhang13141182303的专栏
11-03 403
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 1.div的垂直居中问题  vertical-align:middle;  将行距增加到和整个DIV一样高 line-height:200px;  然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题
IE兼容问题 在chrome中居中 在IE系列下就靠左
zhuyangxing的专栏
10-08 1302
不得不说 血一样的教训，在前几天才在传智播客网络公开课上听到刘老师讲 IE6 下不能有空的注释 也就是说有这样的注释，今天就发现项目中的问题了，我无意间将后台代码用html的注释了 当然这到前台就是空的html注释了 于是就出现了在chrome中正常显示在IE下靠左显示的问题了。   空注释，害我找了一个多小时的问题 当时老师讲是IE6的问题 没想到IE8（XP系统升级的IE8）也一样。。。
IE8中实现垂直居中(兼容IE6、IE7、IE8，Firefox，Chrome等)
热门推荐
06-27 1万+
投票情况统计:
005 - 马科维茨投资组合理论实现
08-10
python基于tushare实现马科维茨投资组合理论实现
基于ASP的学生信息档案管理系统毕业论文及源码.rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
[毕业设计]VB与Access共筑文档安全管理与分享平台(源代码+论文+答辩PPT).zip
最新发布
08-10
[毕业设计]VB与Access共筑文档安全管理与分享平台(源代码+论文+答辩PPT)
毕业设计，基于ASP+SqlServer开发的高校工资管理系统，内含完整源代码，数据库，毕业论文
08-10
毕业设计，基于ASP+SqlServer开发的高校工资管理系统，内含完整源代码，数据库，毕业论文 随着网络应用技术的飞速发展，基于网络的应用系统给人们带来了诸多便利。建立高校工资管理系统是为了适应现代化校园管理的需要，方便管理职工工资情况和职工个人信息；同时也方便职工可以上网查询自己的工资信息，还有利于提高办公效率，改善办公质量，规范高校职工工资的常规管理工作。 高校工资管理系统的开发是基于B/S结构，采用ASP编程技术及SQL Server数据库进行开发。本文首先对网站开发环境和运行平台、数据库、ASP编程技术做了简要的介绍，并对工资管理系统的设计进行了详细的需求分析；然后给出了高校工资管理系统的设计方案及系统的具体实现，实现了高校工资管理系统的构建，主要包括系统工资管理模块、职工信息查询模块和系统信息管理及维护模块；最后，通过测试与分析，说明该系统运行稳定、可靠，具有一定的实用价值。 关键词：工资管理系统；信息查询；信息管理；信息维护；网络数据库
基于MATLAB稳态潮流仿真和优化.zip
08-10
基于MATLAB稳态潮流仿真和优化.zip
ASP物流管理系统设计(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
解决DIV+CSS在IE与Firefox下的兼容性问题
"这篇文章主要探讨了DIV+CSS在不同浏览器，特别是IE6、IE7、IE8和Firefox之间的兼容性问题，并提供了一些处理方法。在Web开发中，尤其是在过渡到Web2.0的过程中，XHTML格式和DOCTYPE声明对于CSS的正确解析至关重要。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值