您现在的位置是:网站首页> 编程资料编程资料
浅谈inline-block及解决空白间距CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
2021-09-07
916人已围观
简介 inline-block 属性的使用随处可见,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美,接下来为大家详细介绍下空白间隙是如何产生的,以及解决办法,感兴趣的朋友可以参考下哈
去掉display:inline-block元素间的多余空白
如下一段代码,display:inline-block元素间的多余空白:
- <style type="text/css">
- *{margin:0; padding:0;}
- body{font:12px/20px Tahoma, Geneva, sans-serif; padding:200px;}
- img {border:0;}
- ul li{ list-style:none;}
- .test{width:200px; border:1px blue solid;}
- .test a{width:32px; height:32px; display:inline-block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-size:0; background:blue;} /* *号部分解决IE7 无法显示 display:inline-block 元素里面的内容,博客内有文章介绍 */
- style>
- <div class="test">
- <a href="#">a>
- <a href="#">a>
- <a href="#">a>
- <a href="#">a>
- <a href="#">a>
- div>
运行截图:
会发现 每1个带display:inline-block;属性的链接 a 水平、垂直方向都带有一定的空白
解决方法:
方法1(附注释说明):
- .test{width:200px; border:1px blue solid; font-size:0;}
- .test a{width:32px; height:32px; display:inline-block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-size:0; background:blue; vertical-align:top;} /* *号部分解决IE7 无法显示 display:inline-block 元素里面的内容,博客内有文章介绍 */
- /* display:inline-block元素的父元素定义 font-size:0 ,可去掉元素水平4px的空白,子元素若要显示文字可重新定义font-size属性即可 */
- /* display:inline-block元素本身定义 vertical-align 属性可去掉元素垂直方向的多余空白*/
关键在于父元素定义font-size:0 去掉行内块元素水平方向空白;子元素定义vertical-align 属性去掉行内块元素垂直方向空白!
如果标签a内加上任意文字,则display:inline-block元素不会生成垂直方向有空白!
方法2(附注释说明):
通过设置父元素 letter-spacing来解决的,该属性的值同字体有关: 如:.test{letter-spacing:-.25em} 要注意的是-.25em是字体设置为Arial时的情况,为其他字体时会有些不同,下面仅列出了常用的几个, 常用字体与letter-spacing的关系:
宋体/Verdana -.5em
Arial -.25em
Tahoma -.333em
方法2未经实验,备忘!
如今有很多网站都用上了 inline-block 属性,比如 {display:inline-block; *display:inline; *zoom:1},以上 css 代码随处可见。很多人看见 *display:inline; *zoom:1 就下意识的认为:哦,原来 inline-block 这个属性 ie6 和 ie7 不支持。那么 ie6,7 真的不支持 display:inline-block 吗?
事实上,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美。具体的请阅读淘宝UED官方博客——一丝所写的《display:inline-block 前世今生》。
当我们使用 inline-block 的时候,就会产生“空白间隙”问题。代码如下:
效果图如下:
我们可以看到:在 ie8、chrome、firefox、opera 以及 safari 浏览器下,两张图片之间有“空白间隙”。
但是在 ie6 和 ie7 浏览器下却正常显示,效果如下:
下面我们就来说说这个“空白间隙”是如何产生的,以及解决办法。
先来说说“空白间隙”是怎么产生的?先看下源代码:
从上面的代码我们很难发现产生“空白间隙”的问题。其实这个问题是我们写代码的习惯所造成的。平时我们写代码,为了使代码看上去“层级分明”,通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
既然我们已经知道产生问题的原因了,那么就很好解决该问题。空白符也是字符,只要是字符就会联想到字体,字体大小之类的。所以去除空白符的存在只需要设置字体大小为零就行了(font-size:0;)。修改已上代码:
可以看到在 ie8,firefox,chrome 和 opera 浏览器下已经没有问题了,但是在 safari 浏览器下还是有问题。
关于 safari 浏览器的兼容,请阅读大漠写的《如何解决inline-block元素的空白间距》。
最后整理:
测试浏览器:ie6,ie7,ie8,chrome,firefox,safari,opera。
相关内容
- IE/火狐/Chrome操作display:none对象所遇问题解答css元素隐藏原理及display:none和visibility:hiddenie9崩溃现象当js设置tr元素样式为display:noneIE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUGdisplay:none和visibility:hidden的差别比较与演示代码如何通过 display:olck/none 完成一个菜单栏
- css鼠标样式cursor介绍(鼠标手型)用css添加手状样式鼠标移上去变小手修改鼠标样式的CSS代码CSS定义鼠标经过时鼠标图形的十五种样式整理CSS中cursor属性的鼠标样式明细css 控制鼠标显示样式示例CSS 鼠标样式和手指样式整理css3实现信封动态折叠留言样式并响应鼠标CSS cursor 属性 -- 鼠标指针样式效果巧妙运用CSS立刻改变鼠标的样式-CSS教程-网页制作-网页教学网CSS更改鼠标为手状样式
- DIV+CSS相对IE6 IE7和IE8浏览器行为区别及兼容性问题整理
- 让IE 6,7,8模拟部分的css3属性浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- 关于CSS Tooltips(鼠标经过时显示)的效果 div+css样式自制带小三角的tooltips效果CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)纯CSS3实现自定义Tooltip边框涂鸦风格的教程用简单的jquery+CSS创建自定义的a标签title提示tooltip怎么用纯CSS制作带小三角的tooltip提示框纯css实现漂亮又健壮的tooltip的方法
- 用CSS3实现Win8风格的方格导航菜单效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 要知道的10个CSS技巧10个必备的CSS技巧总结最常用和实用的CSS技巧 21个神奇的CSS技巧网页制作中应用的50个CSS技巧(国外)CSS技巧:IE6用import导入CSS的问题书写CSS的5个小技巧让你的样式更规范CSS Hack技术介绍及常用的Hack技巧集锦CSS hack技巧之IE6,IE7,firefox显示不同效果IE6、IE7和FF的最简单的hack技巧-CSS教程-网页制作-网页教学网CSS常用技巧之CSS书写技巧和CSS HACK技巧
- DIV多层嵌套margin-top的BUG问题设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- IE9下(table/div/图片)的居中问题浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- CSS中的EM属性之弹性布局纯CSS3弹性框布局实现的渐变色波动列动画效果源码css flex 弹性布局详解CSS3弹性布局内容对齐(justify-content)属性使用详解CSS3弹性伸缩布局之box布局实例讲解CSS3中的box-flex弹性盒属性布局CSS3弹性盒模型flex box快速入门心得(必看篇)几个CSS3的flex弹性盒模型布局的简单例子演示基础的CSS3弹性盒Flexbox布局使用实例CSS3 Flex 弹性布局实例代码详解