Firefox嵌套CSS中div标签居中问题解决方法

本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法，主要包括使用line-height垂直居中，清除容器浮动，不让链接折行，始终让Firefox显示滚动条等内容。

成都创新互联长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为四川企业提供专业的成都网站制作、做网站，四川网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

Firefox嵌套CSS中div标签的居中问题的解决方法

假定有如下情况：

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  div> 
    3. 
  
  
  
  3.  div> 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  div> 
    6. 
  
  
  
  6.  div> 
    7. 
  
  
  
  7.  
    8.

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin:0auto;。

最好的解决方案往往是最简单的，这里列出8个CSS技巧，非常简单，简单到只需要写一行代码，只需要定义一个属性参数。非常适合学习CSS的新手朋友阅读。

◆使用line-height垂直居中

 
 
 
    
  
  
  
  1. line-height:24px;  
    2. 
  
  
  
  2.  
    3.

使用固定宽度的容器并且需要一行垂直居中时，使用line-height即可（高度与父层容器一致）。

◆清除容器浮动

viewplaincopytoclipboardprint?

 
 
 
    
  
  
  
  1. #main{  
    2. 
  
  
  
  2. overflow:hidden;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. #main{  
    5. 
  
  
  
  5. overflow:hidden;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

◆不让链接折行

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. a{  
    2. 
  
  
  
  2. whitewhite-space:nowrap;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. a{  
    5. 
  
  
  
  5. white-space:nowrap;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。

◆始终让Firefox显示滚动条

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. html{  
    2. 
  
  
  
  2. overflow:-moz-scrollbars-vertical;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. html{  
    5. 
  
  
  
  5. overflow:-moz-scrollbars-vertical;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

也可以使用

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. body,html{  
    2. 
  
  
  
  2. min-height:101%;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. body,html{  
    5. 
  
  
  
  5. min-height:101%;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

◆使块元素水平居中

margin:0auto;

其实就是

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. margin-left:auto;  
    2. 
  
  
  
  2. margin-right:auto;  
    3. 
  
  
  
  3. margin-left:auto;  
    4. 
  
  
  
  4. margin-right:auto;  
    5. 
  
  
  
  5.  
    6.

这个技巧基本上所有的CSS教科书都会有说明，别忘记给它加上个宽度。Exploer下也可以使用

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. body{  
    2. 
  
  
  
  2. text-align:center;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. body{  
    5. 
  
  
  
  5. text-align:center;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

然后定义内层容器

text-align:left;#p#

◆隐藏Exploertextarea的滚动条

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. textarea{  
    2. 
  
  
  
  2. overflow:auto;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. textarea{  
    5. 
  
  
  
  5. overflow:auto;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

Exploer默认情况下textarea会有垂直滚动条。

◆设置打印分页

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. h2{  
    2. 
  
  
  
  2. page-break-before:always;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. h2{  
    5. 
  
  
  
  5. page-break-before:always;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

page-break-before属性能设置打印网页时的分页。

◆删除链接上的虚线框

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. a:active,a:focus{  
    2. 
  
  
  
  2. outline:none;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. a:active,a:focus{  
    5. 
  
  
  
  5. outline:none;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

Firefox默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

◆最简单的CSS重置

viewplaincopytoclipboardprint? 

 
 
 
    
  
  
  
  1. *{  
    2. 
  
  
  
  2. margin:0;padding:0  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. *{  
    5. 
  
  
  
  5. margin:0;padding:0  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8.

CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE影响CSS处理，作为W3C的标准，一定要加DOCTYPE声明。

【编辑推荐】

  1. DIV+CSS常见问题及解决方案
  2. 八个困扰新手的DIV CSS网页布局问题
  3. 全面解析CSS优先级规则
  4. 专家推荐 10款优秀CSS框架
  5. 实例解析清除CSS float浮动的三种方法

网页标题：Firefox嵌套CSS中div标签居中问题解决方法
文章URL：http://www.36103.cn/qtweb/news20/15770.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站导航知识

各行业网站

成都网站建设　　 　重庆网站建设网络公司　　 　小程序开发　　 　电信内江机房　　 　成都机柜租用　　 　成都展柜厂　　 　达州做网站　　 　南充服务器托管　　 　腾讯香港虚拟主机　　 　成都木托盘　　 　成都网站建设　　 　重庆服务器托管　　 　成都企业网站制作　　 　四川國際商會　　 　南充网站制作　　 　成都茶叶销售　　 　雅安主机托管　　 　seo网络营销推广　　 　绵阳网站制作　　 　内江广告