本文摘自這一年來自己在工作中經歷的幾個比較好的CSS問題(不一定復雜，但個人覺得都挺值得一說)，同時也準備了2個JS問題

一、CSS篇

1.1 元素默認藍色邊框

input標簽元素(如button、text 、areatext)的一些事件(如click、focus等)，在很多瀏覽器下默認會有藍色邊框出現，如把一個普通button的background和border都設置為none后，觸發點擊后樣式如下：

rgba

這是由元素默認的輪廓線產生的，這是瀏覽器的一種防護機制，起到突出元素的作用，把它干掉就行了，方法如下：

//?方法1:
outline:?none?/?medium;

//?方法2：
outline-width:?0

1.2 背景透明，文字不透明

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

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

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

rgba

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

整體背景透明

上述種效果代碼如下：

//?html
<section>
??<div?class="item-pic">
????<header?class="header1">
??????<h4>你會微笑放手,說好不哭讓我出新專輯h4>
????header>
??div>
??<div?class="item-pic">
????<header?class="header2">
??????<h4>你會微笑放手,說好不哭讓我出新專輯h4>
????header>
??div>
??<div?class="item-pic">
????<div?class="handle-opacity">?
??????<header>
????????<h4>你會微笑放手,說好不哭讓我出新專輯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內置img元素，底部總有間距

用一個div包裹一個img，會出現img不能完全覆蓋div空間，總會在底邊留下一點空隙。

div底部間隙

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

現在我們知道這種現象主要是由于下行字符串保護機制和img是行內元素這兩個因素導致的，那解決方案就從這兩處入手，整理如下：

div設置font-size: 0或line-height: 0，進而行高為0；

img設置 vertical-align: top 或者 middle/，使其不再以默認基線為對齊方式；

img設置 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變換會在瀏覽器上單獨創建一個繪畫層并重新進行渲染，在此渲染過程中也處理了周圍的文字，如果高度為奇數的文字可能會存在半個像素的計算量，瀏覽器對這半個像素會進行優化渲染，所以邊緣會出現模糊的情況。解決方案即：

不要給transform屬性值設置奇數和小數值；

調整整體元素高度不要為基數。

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

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

//?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也能實現：

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

效果如下：

有效

現在要往img后加一個span，發現: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>
失效

而此時:last-of-type依然沒問題：

有效2

現在得出結論：

:last-child選取一群兄弟元素中的最后一個元素，且最后的這個元素必須是所聲明的指定元素(注意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及以下)中，對以“-”間隔的字符串時間格式的解析是不成功的，比如我們寫了這么一個雞肋時間格式適配器：

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)?{
????date?=?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，實例如下：

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

??愛心三連擊

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：

點個「在看」，讓更多的人也能看到這篇內容(喜歡不點在看，都是耍流氓 -_-)

歡迎關注我的5000star文章合集?https://github.com/ljianshu/Blog，希望可以帶給你點啟發！

如果想進前端交流群一起探討技術，請在后臺回復「1」

親，點這漲工資?

總結

以上是生活随笔為你收集整理的css img 适配尺寸_CSS容易使人蒙圈的几个经典问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。