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

本文摘自这一年来自己在工作中经历的几个比较好的CSS问题（不一定复杂，但个人觉得都挺值得一说），这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题（之前有整理过一篇较长的JS问题文章，在此不做推新）。本文会更新下去，希望帮到各位朋友。期待您的点赞，谢谢。

成都创新互联是一家专注于网站建设、做网站与策划设计,曹县网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:曹县等地区。曹县做网站价格咨询:18982081108

一、CSS篇

1.1 元素默认蓝色边框

input标签元素（如button、text 、areatext）的一些事件（如click、focus等），在很多浏览器下默认会有蓝色边框出现，如把一个普通button的background和border都设置为none后，触发点击后样式如下：

这是由元素默认的轮廓线产生的，这是浏览器的一种防护机制，起到突出元素的作用，把它干掉就行了，方法如下：

 
 
 
 
    
  
  
  
  
  1. // 方法1: 
    2. 
  
  
  
  
  2. outline: none / medium; 
    3. 
  
  
  
  
  3. // 方法2： 
    4. 
  
  
  
  
  4. outline-width: 0
    5.

1.2 背景透明，文字不透明

我们通常是使用 opacity来做背景的透明化处理，该属性被所有浏览器支持，可以大胆使用，透明度从0.0（完全透明）到1.0（完全不透明），但该方法会使其所有子元素都透明，此时若只想让背景透明，其他不透明，则可以使用rgba处理背景：

 
 
 
 
    
  
  
  
  
  1. background-color: rgba( red , green , blue , alpha )
    2.

其中这个alpha 即设置透明度，取值在0~1之间。该方法除IE9以下不可用外，其他浏览器均可用，看一下效果：

同理，我们也可以用这个方法把整个背景做透明了，即多写一个div作为modal层做透明处理，可以明显看到上面文字并未透明：

上述种效果代码如下：

 
 
 
 
    
  
  
  
  
  1. // html 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5.       
    你会微笑放手,说好不哭让我出新专辑
     
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.   
 
  •    
  •      
  •       

    你会微笑放手,说好不哭让我出新专辑

     
  •      
  •   
  •     
  •       
  •       
     
  •         

    你会微笑放手,说好不哭让我出新专辑

     
  •        
  •     
    •  
  •    
  •  
  •  
  • .header1 { 
  •   opacity: .6; 
  • } 
  • .header2 { 
  •   background-color: rgba(0, 0, 0, 0.45); 
  • } 
  • .handle-opacity { 
  •   position: absolute; 
  •   width: 100%; 
  •   height: 100%; 
  •   background-color: rgba(255, 255, 255, 0.45); 
  •   header { 
  •     background-color: rgba(0, 0, 0, 0.45); 
  •   } 
  • } 

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

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

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

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

    1.  div设置font-size: 0或line-height: 0，进而行高为0；
    2.  img设置 vertical-align: top 或者 middle/，使其不再以默认基线为对齐方式；
    3.   mg设置 display:block，使其变成块级元素。

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

    1.4 元素自动填充上背景色

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

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

     
 
 
 
      
  
  
  
  
    1. input:-webkit-autofill{ 
      2. 
  
  
  
  
    2.   box-shadow: 0 0 0px 1000px white inset !important; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. select:-webkit-autofill{ 
      5. 
  
  
  
  
    5.   box-shadow: 0 0 0px 1000px white inset !important; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. textarea:-webkit-autofill{ 
      8. 
  
  
  
  
    8.   box-shadow: 0 0 0px 1000px white inset !important; 
      9. 
  
  
  
  
    9. }
      10.

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

    1.5 transform 基数值导致字体模糊

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

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

    1.  不要给transform属性值设置基数和小时值；
    2.  调整整体元素高度不要为基数。

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

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

     
 
 
 
      
  
  
  
  
    1. // html 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
  
  
  
  
    4.     v-for="(item,i) in pics" 
      5. 
  
  
  
  
    5.     :key="i" 
      6. 
  
  
  
  
    6.     :src="item" 
      7. 
  
  
  
  
    7.   /> 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. // css 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. .card { 
      12. 
  
  
  
  
    12.   > img { 
      13. 
  
  
  
  
    13.       width: 150px; 
      14. 
  
  
  
  
    14.       margin-right: 10px; 
      15. 
  
  
  
  
    15.       &:last-child { 
      16. 
  
  
  
  
    16.         border: 5px solid pink; 
      17. 
  
  
  
  
    17.       } 
      18. 
  
  
  
  
    18.    } 
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20.

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

     
 
 
 
      
  
  
  
  
    1. .card { 
      2. 
  
  
  
  
    2.   > img { 
      3. 
  
  
  
  
    3.       width: 150px; 
      4. 
  
  
  
  
    4.       margin-right: 10px; 
      5. 
  
  
  
  
    5.       &:last-of-type { 
      6. 
  
  
  
  
    6.         border: 5px solid pink; 
      7. 
  
  
  
  
    7.       } 
      8. 
  
  
  
  
    8.    } 
      9. 
  
  
  
  
    9. }
      10.

    效果如下：

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

     
 
 
 
      
  
  
  
  
    1. // html 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
  
  
  
  
    4.     v-for="(item,i) in pics" 
      5. 
  
  
  
  
    5.     :key="i" 
      6. 
  
  
  
  
    6.     :src="item" 
      7. 
  
  
  
  
    7.   /> 
      8. 
  
  
  
  
    8.   next is ... 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10. // css 
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12. .card { 
      13. 
  
  
  
  
    13.   > img { 
      14. 
  
  
  
  
    14.       width: 150px; 
      15. 
  
  
  
  
    15.       margin-right: 10px; 
      16. 
  
  
  
  
    16.       &:last-child { 
      17. 
  
  
  
  
    17.         border: 5px solid pink; 
      18. 
  
  
  
  
    18.       } 
      19. 
  
  
  
  
    19.    } 
      20. 
  
  
  
  
    20. } 
      21. 
  
  
  
  
    21.

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

    现在得出结论：

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

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

    二、DOM篇

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

    2.1 IOS日期显示问题

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

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

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

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

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

    2.2 ENTER键使当前页刷新

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
  
  
  
  
    3.     type="text"  
      4. 
  
  
  
  
    4.     v-model.trim="searchText"  
      5. 
  
  
  
  
    5.     placeholder="搜索您感兴趣的内容" 
      6. 
  
  
  
  
    6.     @keyup.enter="goSearch"  
      7. 
  
  
  
  
    7.   /> 
      8. 
  
  
  
  
    8.   
  
  
  
  
    9.     id="hidden"  
      10. 
  
  
  
  
    10.     type="text"  
      11. 
  
  
  
  
    11.     style="display:none"  
      12. 
  
  
  
  
    12.     @keyup.enter="goSearch" 
      13. 
  
  
  
  
    13.   /> 
      14. 
  
  
  
  
    14.

    终于在2020年到来前夕发了一篇比较赶的文章，结束我的2019之旅。本文会一直更新下去，如有不同见解和问题，请留言指出，期待您的点赞。最后祝您2020好运连连。

    新闻标题：CSS容易使人蒙圈的几个经典问题
    URL链接：http://www.stwzsj.com/qtweb/news39/10339.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    品牌网站建设知识

    同城分类信息

    光华村机房　　 　成都企业网站维护　　 　自贡服务器托管　　 　成都门户网站建设　　 　网络推广外包　　 　app开发公司　　 　重庆服务器托管　　 　成都二枢机房　　 　成都ssl证书申请　　 　电子商务商城网站　　 　成都品牌官网设计公司　　 　APP定制开发　　 　成都网站建设　　 　草坪音箱　　 　营销型网站建设　　 　成都网站推广　　 　雅安服务器托管　　 　云服务器　　 　成都广告制作　　 　固迪佳新材料