zoukankan      html  css  js  c++  java
  • 关于display:inline-block间隙问题

    设置一些元素为块级元素时一般这么写

    li{display:inline-block; *display:inline; *zoom:1;} display:inline-block在IE下仅仅是触发了layout,而它本是行布局,触发后,块元素依然还是行布局。所以需让块元素呈递为内联对象,display:inline则起到了这一作用(*号只被ie6、7所识别),然后再通过zoom:1触发layout。即可实现所谓的inline-block。 display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。

    常见的解决方法: 1:去除标签段之间的空格,但是会导致HTML标签可读性差 3:标签写成不闭合,省掉尾标签</a> 2:使用margin、word-spacing、letter-spacing负值:负值的大小与上下文的字体和文字大小相关,外部环境的不确定性,以及最后一个元素多出的父值等问题,这个方法不适合大规模使用 4:使用font-size:0,最好的方法父元素font-size:0; 他的作用便是让多余的空白符消失,当然这会造成所有子元素的文本都一同消失,因此你需要再在子元素加一个font-size:12px。

    每个程序员,都是艺术家.
  • 相关阅读:
    Struts2常用标签总结
    静态代理模式
    Struts2 级联下拉框 详解析
    Hibernate 数据的批量插入、更新和删除
    Java JDBC批处理插入数据操作
    Hibernate中 一 二级缓存及查询缓存(2)
    Matlab获取colorbar颜色并转换为需要的CPT文件
    GMT5 自定义坐标轴
    [转载]matlab绘制同潮同潮实线和等振幅线(2)
    [转载]Matlab小波工具箱的使用2
  • 原文地址:https://www.cnblogs.com/moriah/p/6238307.html
Copyright © 2011-2022 走看看