C3的坑之inline-block

zengdongbao 发布于2019-08-01 18:31 / 860人阅读

最近开始复习css一直在踩坑,今天分享一个inline-block 关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸置疑的可是关于兼容性就不是很让人满意,而浮动虽然很兼容可是觉得清除浮动就很麻烦,于此我在一些大型网站,例如我们的segmentfault的首页导航展示用的布局就是inline-block,觉得inline-block可以撸一波,可是突然发现这里面也存在一些小问题,首先先po出代码

这时候我们采取inline-block进行布局,神奇的事情就发生了

原本的3个div并排在一起,因为3个div变成了行内元素,所以也应该并排在一起,但是....
这里出现了两个问题:

div之间出现间隔

子div与父div之间有一个4px的间距

这里会出现这种问题的原因是因为 inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距

div之间的间距解决的方法

在这里我尝试过一个方法就是设置margin-right为负值,

在这里我们能看到第一个div与第二个div仍然有一个1px的间距,而第二个和第三个没有间距,子div和父div没有间距,说明我们的问题不是在这里

我在参考张旭鑫大神的博客深感佩服觉得采用这种方法最好:

给父div加这样的css属性

font-size:0
-webkit-text-size-adjust:none;

po出代码

那么又有一个问题了,-webkit-text-size-adjust是什么????

webkit内核的浏览器(chrome)中,当在css中定义的中文font-size小于12px的时候,浏览器仍然使用12px,这时就可以用-webkit-text-size-adjust:none;

哈哈,这样我们的问题就解决了

最后说下inline-block的兼容性:参考这篇文章
-->
IE6、IE7不识别inline-block但可以触发块元素。其它主流浏览器均支持inline-block。这就够了,ie6,7就不考虑了,原因嘛,你懂的...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51788.html

C3的坑之inline-block

最近开始复习css一直在踩坑,今天分享一个inline-block 关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸置疑的可是关于兼容性就不是很让人满意,而浮动虽然很兼容可是觉得清除浮动就很麻烦,于此我在一些大型网站,例如我们的segmentfault的首页导航展示用的布局就是inline-block,觉得inline-block可以撸一...

luck 2019-08-30 13:53 评论0 收藏0
vue cli 3.x 的坑之 px2rem-loader

摘要：使用脚手架搭建项目，在里面配置后，一直报错在的有相同的问题，作者回复建议使用插件来代替这个使用 vue cli 3.x脚手架搭建项目，在 vue.config.js 里面配置 px2rem-loader 后，一直报错 Module build failed (from ./node_modules/px2rem-loader/index.js): Error: undefined:1...

imtianx 2019-08-23 14:12 评论0 收藏0
微信小程序的坑之wx.miniProgram.postMessage

摘要：也就是只有在小程序后退组件销毁分享时才会触发所以应该改变的时机，调换顺序就可以了获取成功这样再试试，发现能正常捕获消息了工作中有个需求是小程序的网页在关闭的时候，需要回传给小程序一个参数查阅小程序官方文档，有这样一个接口 wx.miniProgram.postMessage ，可以用来从网页向小程序发送消息，然后通过 bindmessage 事件来监听消息，如下是官方文档描述 sh...

sorra 2019-08-23 12:24 评论0 收藏0
腾讯优测-优社区干货精选 | 那些年，我们在Android机型适配上遇到的坑之Camera拍照时快

文/腾讯优测研发工程师吴宇焕优测小优有话说： android机型适配的坑自然是不少，不想掉坑快来优测优社区~ 现在Android手机一般都会带有照相功能，有很多朋友就发现手机照相时快门声音很响，想关又关不掉。。。。。不过话说回来，静音拍照你想做啥？来到主题上，因为网络上有很多关于删除或修改快门声音文件是关闭快门声的方法的内容，所以我就不赘述了。今天我想和大家说的是：在开发中，针对camera...

tain335 2019-06-24 19:36 评论0 收藏0
「前端早读君008」新手必踩坑之display: inline-block

摘要：中线基线顶线底线中线基线顶线底线是文本的几个基本线，其对应位置如下图基线小写英文字母的下端沿。中线小写英文字母的中间。将元素的基线与其父元素的下标基线对齐。将元素的基线对准给定长度高于其父元素的基线。今日励志语往日不可追，来日犹可期，祝大家2019年继往开来迷之间隙我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下：我我 ...

sevi_stuo 2019-08-30 15:55 评论0 收藏0