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

Firefox Bug: inline/inline-block的间隙采用代码缩进可解决

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

本文主要包含inline-block,Firefox,Bug等相关知识,佚名 希望在学习及工作中可以帮助到您
首先要说明的是,这个标题有点标题党的意思,这个 bug 也存在于 IE8 下,在 IE6 和 IE7 下正常。之前写过两篇关于 IE bug 的文章,这里特意用了 Firefox bug 作为标题,是为了给自己找点心里安慰,省得总是埋怨 IE :)。

关于 inline-block,可以参考之前的一篇文章 跨浏览器的inline-block
这个 bug 是“痛在远方”同学碰到的,确实很诡异啊,貌似对标准支持越好的浏览器才会有这个问题。本文来自前端观察,转载请以链接形式注明出处。
如下图:

在 Firefox 下,inline/inline-block 的元素直接会有莫名的几像素(貌似是6px)的空隙。这个 bug 比较难发现,因为为了美观,一般的这种设计,inline/inline-block 的元素直接都会有一定的间距,再加上目前的浏览器对 inline-block 这个属性的支持并不是很好,这个属性应用的也不是很频繁。由跨浏览器的inline-block来看,要对浏览器做不少hack,代码量以及方便性上不如直接使用浮动。因此这个 bug 的影响其实不大。

要解决这个 bug,貌似目前没有什么好的方法,只能改变代码的缩进,把换行去掉,整个代码写入一行。

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

  • inline-block元素默认间距的两种清除方法示例代码
  • 兼容浏览器的css inline-block写法
  • 深入解析CSS的display:inline-block属性的使用
  • inline-block带来的元素间距问题解决
  • 深入了解float与inline-block
  • 让IE6/IE7支持display:inline-block属性的两种方法
  • 如何解决IE6/IE7不识别display:inline-block属性
  • CSS inline-block属性概述及其使用示例
  • display:inline-block的使用示例
  • CSS属性display:inline-block用法深入理解

相关文章

  • 2017-08-066种非常炫酷的CSS3按钮边框动画特效
  • 2017-08-06CSS 网页布局问题 li上多出的margin问题
  • 2017-08-06网页制作小技巧 dl dt dd标签用法
  • 2017-08-06W3标准不变 清除浮动实现代码
  • 2017-08-14使用CSS绝对定位实现块状元素自适应居中
  • 2017-08-06基于CSS3实现图片模糊过滤效果
  • 2017-08-06css页面中常见左中右分栏布局的两种实现方式
  • 2017-08-06css 浮动(float)页面布局(下)
  • 2017-08-06CSS table 单行布局示例代码
  • 2017-08-06CSS div布局需要注意的两点

文章分类

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

最近更新的内容

    • IE 6不支持min-height或max-width等属性的完美解决方案
    • CSS3的RGBA中关于整数和百分比值的转换
    • 深入理解CSS中选择器的逻辑处理
    • 利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
    • css 超出用省略号当标题字符溢出用省略号表示
    • 独行DIV自适应宽度布局CSS实例与应用范围
    • 网站用户体验设计中的法则:信息交互设计金字塔法则
    • css 入门基础教程
    • css教程实现div背景色渐变色代码分享
    • 解决中文版Chrome下网页不能显示小于12px字体

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

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