老旧Webkit浏览器行内元素0间距问题
有时我们希望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间距问题的更多相关文章
- 【转】行内元素和inline-block产生的水平空隙bug
重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class=“”><span clas ...
- HTML块级元素与行内元素的区别
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1>. ...
- css笔记12:块元素和行内元素
1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 清除行内元素之间的HTML空白
原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...
- span i s等行内元素标签之间出现奇怪空格符号
上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框 <p> <span><i>收货人:</i>{remar ...
- css变换transform 以及 行内元素的一些说明
变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...
随机推荐
- 12个CSS高级技巧汇总
1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...
- jquery.ellipsis.js段落超出省略号插件
为了实现在段落尾部超出文字替换为省略号,自己写的插件,并作了简单的优化. 下面给出脚本演示页面及注释,在此之前介绍一下插件参数 1.lineNum:数字.限制段落的行数 2.english:布尔.英文 ...
- 【转】 LESS CSS 框架简介
简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...
- MOSS2010部署解决方案失败是可以尝试更新
update-spsolution -identity XXX.wsp -literalpath D:\SPS2010Setup\XXX.wsp -gacdeployment
- yum update
Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的:代码如下:yum -y update升级所有包同时也升级软件和系统内核 代码如下:yum -y u ...
- log4j异常问题
log4j:WARN No appenders could be found for logger 转自:最爱NBA 直接写我的解决办法:在src下面新建file名为log4j.propertie ...
- 进程间通信机制IPC
进程通信是指进程之间的信息交换.PV操作是低级通信方式,例如信号量,主要是进程间以及同一进程内不同线程之间的同步手段.髙级通信方式是指以较高的效率传输大量数据的通信方式.高级通信方法主要有以下三个类. ...
- Linux Mysql 总结
一:Error Code: . Access denied for user 'root'@'%' to database ① mysql -u root -p 进入到mysql中 ②SELECT h ...
- CentOS yum安装配置lnmp服务器(Nginx+PHP+MySQL)
1.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dport ...
- Android R.layout. 找不到已存在的布局文件
今天写新页面的时候,突然发现R.layout. 无法找到我已经写好的页面,于是顿时就不淡定了. 把R文件翻了一遍 发现也没有.... 然后我就看到了这个. android.R 原来是我错把Andr ...