分析CSS容易使人蒙圈的几个经典问题

1.3 div内置img元素，底部总有间距

用一个div包裹一个img，会出现img不能完全覆盖div空间，总会在底边留下一点空隙。

这种现象产生的原因是img是行内元素，浏览器为下行字符（如：g、y、j、p、q）留下的一些空间，这些字符是会比其他字符多占据底部一些空间（具体以当前字体大小有关），这种规则会影响行内元素img标签（其默认垂直对齐方式是依照基线来的，即vertical-align: baseline），同样行内元素都会和外部元素留这么一丢丢安全距离。上图右侧就是加了文字的效果，这样就更说明一切了。

现在我们知道这种现象主要是由于下行字符串保护机制和img是行内元素这两个因素导致的，那解决方案就从这两处入手，整理如下：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2.  div设置font-size: 0或line-height: 0，进而行高为0；

3.  img设置 vertical-align: top 或者 middle/，使其不再以默认基线为对齐方式；

4.   mg设置 display:block，使其变成块级元素。

综上，个人认为方法3是最好用的，方法1不推荐使用。

1.4 元素自动填充上背景色

该现场多在表单输入等场景上会出现，初次看到确实很怪异，效果如图：

即当浏览器（chrome）给输入框自动填充内容后，也隐藏会自动给输入框带上背景（黄或灰蓝），该问题是由于chrome会默认给自动填充的input、select、textarea等加上:-webkit-autofill私有伪属性造成的，比较好的解决方案就是做样式覆盖，代码如下：

input:-webkit-autofill{    box-shadow: 0 0 0px 1000px white inset !important;  }  select:-webkit-autofill{    box-shadow: 0 0 0px 1000px white inset !important;  }  textarea:-webkit-autofill{    box-shadow: 0 0 0px 1000px white inset !important;  }

比较渣的办法是设置禁止自动填充，但还是别那样做了...

1.5 transform 基数值导致字体模糊

transform作为CSS3最为自豪的属性，已经成为了当前前端开发中不可或缺的方法，但它有个渲染的问题，即当元素设置有transform，且其值为基数或小数，同事其整体高度也有基数时，其内部文字会变模糊，如图：

上图上模糊状态下的，下图是修正过的，具体原因经查可能是因为transform变换会在浏览器上单独创建一个绘画层并重新进行渲染，在此渲染过程中也处理了周围的文字，如果高度为奇数的文字可能会存在半个像素的计算量，浏览器对这半个像素会进行优化渲染，所以边缘会出现模糊的情况。解决方案即：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2.  不要给transform属性值设置基数和小时值；

3.  调整整体元素高度不要为基数。

1.6 :last-child 和 :last-of-type

作为CSS常用伪类选择器，:last-child经常会被用到，但有时遇到极端情况，它会意外失效，让人摸不着头脑，例子如下：3个img标签包裹在card中，当前需求是使最后一张图的边框呈粉色，代码如下：

// html          // css    .card {    > img {        width: 150px;        margin-right: 10px;        &:last-child {          border: 5px solid pink;        }     }  }  

同理用:last-of-type也能实现：

.card {    > img {        width: 150px;        margin-right: 10px;        &:last-of-type {          border: 5px solid pink;        }     }  }

效果如下：

现在要往img后加一个span，发现:last-child已失效：

// html          next is ...    // css    .card {    > img {        width: 150px;        margin-right: 10px;        &:last-child {          border: 5px solid pink;        }     }  }  

而此时:last-of-type依然没问题：

现在得出结论：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2.  :last-child选取一群兄弟元素中的最后一个元素，且最后的这个元素必须是所声明的指定元素（注意2个条件）；

3.  :last-of-type选取一群兄弟元素中的最后一个指定类型的元素。

可知，:last-of-type更严谨一些，不容易产生意外bug，我更推荐使用它。同理适用于:nth-last-child(n)和:nth-last-of-type(n)

二、DOM篇

这部分我会叙述一些DOM操作遇到的一些容易被忽视的问题。

2.1 IOS日期显示问题

经常做H5移动端开发的朋友我想对这个问题肯定不陌生，那就是在部门IOS版本（IOS5及以下）中，对以“-”间隔的字符串时间格式的解析是不成功的，比如我们写了这么一个鸡肋时间格式适配器：

function DateFormat(date) {    if(!date) return null;    date = new Date(date);    let Y = date.getFullYear();    let M = (date.getMonth() >= 0 && date.getMonth() <= 8) ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;    let D = (date.getDate() >= 0 && date.getDate() <= 9) ? `0${date.getDate()}`: `${date.getDate()}`;    return `Y-M-D`  }

此时如果在IOS5及以下版本的iphone下，传入 "2019-12-31"就会呈现出 NaN-NaN-NaN，而其他IOS版本及安卓系统都是没问题的。

针对上述问题，要做兼容适配，即把以"-"间隔的事件字符串替换成以"/"即可，同样是这个适配器，添加一段代码：

function DateFormat(date) {    if(!date) return null;    if(typeof date === 'string' &&  date.indexOf('T')!=-1 && date.indexOf('+')!=-1) {      datedate = date.replace(/-/g, '/').replace('T',' ').substring(0,date.indexOf('.'))    }    date = new Date(date);    let Y = date.getFullYear();    let M = (date.getMonth() >= 0 && date.getMonth() <= 8) ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;    let D = (date.getDate() >= 0 && date.getDate() <= 9) ? `0${date.getDate()}`: `${date.getDate()}`;    return `Y-M-D`  }

2.2 ENTER键使当前页刷新

这个真的很诡异的问题，当在一个表单中执行了ENTER键提交后，如果是打开新页面显示提交结果，则会发现当前表单页面也跟着刷新了，这种体验当然是很糟糕的。经查证，该问题的产生条件为：Form中只有一个input时，此时执行ENTER键会自动提交表单并刷新页面。解决方案也很粗暴，直接在input输入框附近写一个隐藏标签，这样就有2个input了，即避免了产生默认刷新的bug，实例如下：

感谢各位的阅读，以上就是“分析CSS容易使人蒙圈的几个经典问题”的内容了，经过本文的学习后，相信大家对分析CSS容易使人蒙圈的几个经典问题这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4