• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS display:block在Firefox下显示布局错乱问题

CSS display:block在Firefox下显示布局错乱问题

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含display:block,Firefox,布局等相关知识,佚名 希望在学习及工作中可以帮助到您
对于某一单元行需要显示时,使用CSS display:block属性,不需要显示时使用display:none属性,在IE浏览器中显示正常,没有任何问题,但是当用Firefox浏览时却出现了布局错乱的问题,这是为什么呢?

本文向大家介绍一下如何解决CSS display:block在Firefox下显示布局错乱问题,按照常理,对于某一单元行需要显示时,使用CSS display:block属性,在IE浏览器中显示正常,但是当用Firefox浏览时却出现了布局错乱的问题,这里和大家分享一下解决方法。

CSS display:block在Firefox下显示布局错乱问题
按照常理,对于某一单元行需要显示时,使用CSS display:block属性,不需要显示时使用display:none属性,而且这样做在IE浏览器中显示正常,没有任何问题。
但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是CSS display:block属性搞的鬼。
1、当表格为多列的情况下,属性为"CSS display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析。
2、同一行反复的在"CSS display:none;"与"CSS display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。

解决方法:
1、用CSS display:table-row属性来调试,发现者FireFox下正常了,但IE是不支持改属性的,怎么办呢?用JS来做判断,然后做兼容吧。
2、另外一个很简单也很可行的方法,就是用display:''这个属性dispaly后面不加任何的东西,很奇怪,这样就兼容了Firefox和IE了。

您可能想查找下面的文章:

  • css中display:block;的用法及适用标签详解
  • CSS中display:block的作用介绍
  • CSS display:block在Firefox下显示布局错乱问题

相关文章

  • 2017-08-06详解CSS中的选择器优先级顺序
  • 2017-08-06div 内table 居中实现代码
  • 2017-08-06CSS样式的基础学习总结
  • 2017-08-06利用CSS中linear制作复杂的边框效果
  • 2017-08-06基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
  • 2017-08-06浏览器的重绘repaints与重排reflows深入分析
  • 2017-08-06css控制div鼠标放上去变色
  • 2017-08-06CSS边界线消失的问题详解
  • 2017-08-06CSS伪元素before、after设置特殊效果:制作时尚焦点图相框
  • 2017-08-06谨慎使用CSS中的星号(*)通配符

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用CSS媒体查询和JavaScript判断浏览器设备类型的好方法
    • CSS垂直居中实现方法大全
    • 常用的网页布局方法单侧固定另一侧适应充满
    • 网页设计应该熟知的CSS 3.0技术
    • CSS视差滚动效果
    • IE7 设置z-index的覆盖问题的解决方法
    • css 表单上传文件的“浏览”按钮修改
    • 用纯CSS实现禁止鼠标点击事件示例代码
    • CSS3绘制圆角矩形的简单示例
    • css position 定位

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有