一、标签属性设置为inline-block出现隐藏的长度为4px的间隙
首先说下:这不是bug,这是符合规范的应该有的表现,但是有时这种间距对我们布局或处理兼容性产生影响,因此需要去除掉它
出现的原因是标签段之间的空格
处理后:
解决方法:
1. 使用font-size
2. 移除空格 代码可读性低,一般不建议采取此类方法
3.使用word-spacing(单词边距)
4.使用字符间距(letter-spacing)
google chrome浏览器 ul的letter-spacing最大值为-5px,再大就会出现间隙(测试时间18/08/01 )
ie浏览器 ul的letter-spacing最大值为-4px,再大就会出现间隙(测试时间18/08/01 )
5.如果正确使用类选择器?(俩个类选择器之间是否有空格的区别)
比如有这样一个场景,框架已有定义好的样式,但不适用于当前页面的UI要求,需要我们重置该UI
<QInput className="input-zone__mobile"/>页面中有多个这样子的组件,但className不同 对应于原生的
<div class="q-input q-input--default q-list-line">/*className会加到该标签当中*/
<div class="q-list-line__hd">
<span class="q-input__label">input标题</span>
</div>
<div class="q-list-line__bd">
<input
class="q-input__control"
placeholder="呵呵"
type="text"
/>
</div>
</div>
我们可以通过.input-zone__mobile.q-input-default{***}重置<QInput/>组件样式
总结:俩个类选择器之间是否有空格的区别
有空格:.class1 .class2{}
即后代选择器,选择class1后代的有class2的节点
无空格: .class1.class2{}
即选择同时含有class1和class2的元素节点