有时我们希望display:inline-block的元素之间的天衣无缝、紧密相依,比如说如下的情情形:

一般情况下我们使用如下代码可以实现:

.pageNav {
font-size:;
text-align: center;
}
.pageNav a {
display: inline-block;
font-size: 14px;
color: #666;
border: 1px solid #ccc;
}

但是在版本过老的webkit内核浏览器中,你看到的结果可能是:那可恶的间距依然存在~~~

拜读了神侠ZXX的文章后(文章地址:http://www.zhangxinxu.com/wordpress/?p=2357),解决方法得之如下:

利用MediaQuery对webkit内核的浏览器做单独的CSS Hack:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.pageNav{
font-size:14px;
letter-spacing: -0.31em;
/*word-spacing: -0.43em; */
}
.pageNav a {
letter-spacing: normal;
word-spacing: normal;
}
}

老旧Webkit浏览器行内元素0间距问题的更多相关文章

  1. 【转】行内元素和inline-block产生的水平空隙bug

    重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class=“”><span clas ...

  2. HTML块级元素与行内元素的区别

    块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1>. ...

  3. css笔记12:块元素和行内元素

    1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...

  4. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  5. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  6. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. 清除行内元素之间的HTML空白

    原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...

  8. span i s等行内元素标签之间出现奇怪空格符号

    上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框 <p> <span><i>收货人:</i>{remar ...

  9. css变换transform 以及 行内元素的一些说明

    变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...

随机推荐

  1. php上传图片到server

    php文件上传中会用到$_FILES系统函数 一.$_FILES系统函数 PHP编程语言中的常见的$_FILES系统函数使用方法有: $_FILES['myFile']['name'] 显示clien ...

  2. CRM odata方法 js容易出现的错误,大小写区分 Value Id

    Id Value  注意大小写,I大写,V大写,typeResults.result[0].yt_category.Value; 否则会报 错,Result.yt_businessunit_terri ...

  3. SessionState的配置 [转载]

    ASP.NET会话状态模块在Web.config文件中<System.web>标记下的<Sessionstate>标记的mode属性来决定该属性的四种可能的值: Off. In ...

  4. Sql Server 2008开发版(Developer Edition)过期升级企业版(Enterprise Edition)失败后安装学习版(Express Edition)

    最近一个多月,甚是悠哉,无事可做.上线的网站系统也没接到客户的反馈,反而觉得无聊之极了.上周五早上,一上QQ,就收到客户发来消息,管理平台无法登陆了.心里一惊,立马开始查找故障原因.翻看了系统日志,提 ...

  5. nginx upstream setting

    upstream proxy_1 { server 127.0.0.1:8080; #连接到上游服务器的最大并发空闲keepalive长连接数(默认是未设置,建议与Tomcat Connector中的 ...

  6. jQuery1.9.1针对checkbox的调整

    在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下: 判断是否选中 $('#checkbox').prop('checked') 设置选中与不选中状态: $('#che ...

  7. js闭包陷阱问题

    JavaScript是一种非常强大的函数式编程语言,可以动态创建函数对象. 由于JavaScript还支持闭包(Closure),因此,函数可以引用其作用域外的变量,非常强大. 来看看在JavaScr ...

  8. placeholder 兼容 IE

    placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF.Chrome.Safari.Opera 以及 IE10 都支持,IE6- ...

  9. 记一次C++与lua连接

    今晚,花了两个多钟折腾lua和c++的互连,终于成功了,觉得有必要记录下来.说实话,搜索引擎真是有利有弊,利在你有地方搜答案,弊则在于你半天都找不到正确的答案甚至找到误导你的答案,今晚更加加深了我的体 ...

  10. CDC不同模式在ODI中体现系列之一 同步模式

    CDC不同模式在ODI中体现系列之一 同步模式 Oracle Database Change Data Capture feature 变化数据捕获是一个通称,是用来描述捕捉增量变化应用到数据存储.随 ...