[[312088]]

本文摘自這一年來自己在工作中經(jīng)歷的幾個(gè)比較好的CSS問題（不一定復(fù)雜，但個(gè)人覺得都挺值得一說），這些CSS問題平時(shí)很少遇到，即使遇到后也不一定知道解決方案，即使知道解決方案也不一定知道產(chǎn)生的原理，同時(shí)也準(zhǔn)備了2個(gè)JS問題（之前有整理過一篇較長的JS問題文章，在此不做推新）。本文會(huì)更新下去，希望幫到各位朋友。期待您的點(diǎn)贊，謝謝。

一、CSS篇

1.1 元素默認(rèn)藍(lán)色邊框

input標(biāo)簽元素（如button、text 、areatext）的一些事件（如click、focus等），在很多瀏覽器下默認(rèn)會(huì)有藍(lán)色邊框出現(xiàn)，如把一個(gè)普通button的background和border都設(shè)置為none后，觸發(fā)點(diǎn)擊后樣式如下：

這是由元素默認(rèn)的輪廓線產(chǎn)生的，這是瀏覽器的一種防護(hù)機(jī)制，起到突出元素的作用，把它干掉就行了，方法如下： 

// 方法1:  
outline: none / medium;  
// 方法2：  
outline-width: 0 

1.2 背景透明，文字不透明

我們通常是使用 opacity來做背景的透明化處理，該屬性被所有瀏覽器支持，可以大膽使用，透明度從0.0（完全透明）到1.0（完全不透明），但該方法會(huì)使其所有子元素都透明，此時(shí)若只想讓背景透明，其他不透明，則可以使用rgba處理背景： 

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

其中這個(gè)alpha 即設(shè)置透明度，取值在0~1之間。該方法除IE9以下不可用外，其他瀏覽器均可用，看一下效果：

同理，我們也可以用這個(gè)方法把整個(gè)背景做透明了，即多寫一個(gè)div作為modal層做透明處理，可以明顯看到上面文字并未透明：

上述種效果代碼如下： 

// html  
<section>  
  <div class="item-pic">  
    <header class="header1">  
      <h4>你會(huì)微笑放手,說好不哭讓我出新專輯</h4>  
    </header>  
  </div>  
  <div class="item-pic">  
    <header class="header2">  
      <h4>你會(huì)微笑放手,說好不哭讓我出新專輯</h4>  
    </header>  
  </div> 
   <div class="item-pic">  
    <div class="handle-opacity"> <!-- 透明罩 -->  
      <header>  
        <h4>你會(huì)微笑放手,說好不哭讓我出新專輯</h4>  
      </header>  
    </div>  
  </div>  
</section>  
<style lang="less">  
.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);  
  }  
}  
</style> 

1.3 div內(nèi)置img元素，底部總有間距

用一個(gè)div包裹一個(gè)img，會(huì)出現(xiàn)img不能完全覆蓋div空間，總會(huì)在底邊留下一點(diǎn)空隙。

這種現(xiàn)象產(chǎn)生的原因是img是行內(nèi)元素，瀏覽器為下行字符（如：g、y、j、p、q）留下的一些空間，這些字符是會(huì)比其他字符多占據(jù)底部一些空間（具體以當(dāng)前字體大小有關(guān)），這種規(guī)則會(huì)影響行內(nèi)元素img標(biāo)簽（其默認(rèn)垂直對齊方式是依照基線來的，即vertical-align: baseline），同樣行內(nèi)元素都會(huì)和外部元素留這么一丟丟安全距離。上圖右側(cè)就是加了文字的效果，這樣就更說明一切了。

現(xiàn)在我們知道這種現(xiàn)象主要是由于下行字符串保護(hù)機(jī)制和img是行內(nèi)元素這兩個(gè)因素導(dǎo)致的，那解決方案就從這兩處入手，整理如下：

1.  div設(shè)置font-size: 0或line-height: 0，進(jìn)而行高為0；
2.  img設(shè)置 vertical-align: top 或者 middle/，使其不再以默認(rèn)基線為對齊方式；
3.   mg設(shè)置 display:block，使其變成塊級元素。

綜上，個(gè)人認(rèn)為方法3是最好用的，方法1不推薦使用。

1.4 元素自動(dòng)填充上背景色

該現(xiàn)場多在表單輸入等場景上會(huì)出現(xiàn)，初次看到確實(shí)很怪異，效果如圖：

即當(dāng)瀏覽器（chrome）給輸入框自動(dòng)填充內(nèi)容后，也隱藏會(huì)自動(dòng)給輸入框帶上背景（黃或灰藍(lán)），該問題是由于chrome會(huì)默認(rèn)給自動(dòng)填充的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;  
} 

比較渣的辦法是設(shè)置禁止自動(dòng)填充，但還是別那樣做了...

1.5 transform 基數(shù)值導(dǎo)致字體模糊

transform作為CSS3最為自豪的屬性，已經(jīng)成為了當(dāng)前前端開發(fā)中不可或缺的方法，但它有個(gè)渲染的問題，即當(dāng)元素設(shè)置有transform，且其值為基數(shù)或小數(shù)，同事其整體高度也有基數(shù)時(shí)，其內(nèi)部文字會(huì)變模糊，如圖：

上圖上模糊狀態(tài)下的，下圖是修正過的，具體原因經(jīng)查可能是因?yàn)閠ransform變換會(huì)在瀏覽器上單獨(dú)創(chuàng)建一個(gè)繪畫層并重新進(jìn)行渲染，在此渲染過程中也處理了周圍的文字，如果高度為奇數(shù)的文字可能會(huì)存在半個(gè)像素的計(jì)算量，瀏覽器對這半個(gè)像素會(huì)進(jìn)行優(yōu)化渲染，所以邊緣會(huì)出現(xiàn)模糊的情況。解決方案即：

1.  不要給transform屬性值設(shè)置基數(shù)和小時(shí)值；
2.  調(diào)整整體元素高度不要為基數(shù)。

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

作為CSS常用偽類選擇器，:last-child經(jīng)常會(huì)被用到，但有時(shí)遇到極端情況，它會(huì)意外失效，讓人摸不著頭腦，例子如下：3個(gè)img標(biāo)簽包裹在card中，當(dāng)前需求是使最后一張圖的邊框呈粉色，代碼如下： 

// html  
<div class="card">  
  <img  
    v-for="(item,i) in pics"  
    :key="i"  
    :src="item"  
  />  
</div>  
// css  
<style lang="less">  
.card {  
  > img {  
      width: 150px;  
      margin-right: 10px;  
      &:last-child {  
        border: 5px solid pink;  
      }  
   }  
}  
</style> 

同理用:last-of-type也能實(shí)現(xiàn)： 

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

效果如下：

現(xiàn)在要往img后加一個(gè)span，發(fā)現(xiàn):last-child已失效： 

// html  
<div class="card">  
  <img  
    v-for="(item,i) in pics"  
    :key="i"  
    :src="item"  
  />  
  <span>next is ...</span>  
</div>  
// css  
<style lang="less">  
.card {  
  > img {  
      width: 150px;  
      margin-right: 10px;  
      &:last-child {  
        border: 5px solid pink;  
      }  
   }  
}  
</style> 

而此時(shí):last-of-type依然沒問題：

現(xiàn)在得出結(jié)論：

1.  :last-child選取一群兄弟元素中的最后一個(gè)元素，且最后的這個(gè)元素必須是所聲明的指定元素（注意2個(gè)條件）；
2.  :last-of-type選取一群兄弟元素中的最后一個(gè)指定類型的元素。

可知，:last-of-type更嚴(yán)謹(jǐn)一些，不容易產(chǎn)生意外bug，我更推薦使用它。同理適用于:nth-last-child(n)和:nth-last-of-type(n)

二、DOM篇

這部分我會(huì)敘述一些DOM操作遇到的一些容易被忽視的問題。

2.1 IOS日期顯示問題

經(jīng)常做H5移動(dòng)端開發(fā)的朋友我想對這個(gè)問題肯定不陌生，那就是在部門IOS版本（IOS5及以下）中，對以“-”間隔的字符串時(shí)間格式的解析是不成功的，比如我們寫了這么一個(gè)雞肋時(shí)間格式適配器： 

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`  
} 

此時(shí)如果在IOS5及以下版本的iphone下，傳入 "2019-12-31"就會(huì)呈現(xiàn)出 NaN-NaN-NaN，而其他IOS版本及安卓系統(tǒng)都是沒問題的。

針對上述問題，要做兼容適配，即把以"-"間隔的事件字符串替換成以"/"即可，同樣是這個(gè)適配器，添加一段代碼： 

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鍵使當(dāng)前頁刷新

這個(gè)真的很詭異的問題，當(dāng)在一個(gè)表單中執(zhí)行了ENTER鍵提交后，如果是打開新頁面顯示提交結(jié)果，則會(huì)發(fā)現(xiàn)當(dāng)前表單頁面也跟著刷新了，這種體驗(yàn)當(dāng)然是很糟糕的。經(jīng)查證，該問題的產(chǎn)生條件為：Form中只有一個(gè)input時(shí)，此時(shí)執(zhí)行ENTER鍵會(huì)自動(dòng)提交表單并刷新頁面。解決方案也很粗暴，直接在input輸入框附近寫一個(gè)隱藏標(biāo)簽，這樣就有2個(gè)input了，即避免了產(chǎn)生默認(rèn)刷新的bug，實(shí)例如下： 

<form>  
  <input  
    type="text"   
    v-model.trim="searchText"   
    placeholder="搜索您感興趣的內(nèi)容"  
    @keyup.enter="goSearch"   
  />  
  <input  
    id="hidden"   
    type="text"   
    style="display:none"   
    @keyup.enter="goSearch"  
  />  
</form> 

終于在2020年到來前夕發(fā)了一篇比較趕的文章，結(jié)束我的2019之旅。本文會(huì)一直更新下去，如有不同見解和問題，請留言指出，期待您的點(diǎn)贊。最后祝您2020好運(yùn)連連。