在瀏覽器中實(shí)現(xiàn)用戶界面時(shí)，請盡可能減少瀏覽器帶來的差異，以使用戶界面具有可預(yù)測性。跟蹤所有這些差異很困難，因此，我整理了一些常見問題及其解決方案方便大家查看。

[[329670]]

1.重置button和input元素的背景

添加一個(gè)按鈕時(shí)，重置它的背景，否則它會(huì)在不同的瀏覽器中看起來不同。在下面的例子中，同樣的按鈕在 Chrome 和 Safari 中，后者添加了默認(rèn)的灰色背景。

重置按鈕的樣式可以解決些問題：

button { 
  appearance: none; 
  background: transparent; 
} 

事例源碼：https://codepen.io/shadeed/pen/MzWBYv

2.Overflow: scroll Vs auto

要限制元素的高度并允許用戶在其中滾動(dòng)，可以添加overflow: scroll-y。在 macOS 上的Chrome上會(huì)很好看。然而，在 Windows上，滾動(dòng)條總是在那里(即使內(nèi)容很短)。這是因?yàn)闊o論內(nèi)容如何，scroll-y都會(huì)顯示滾動(dòng)條，這時(shí)候我們可以使用overflow: auto，它只會(huì)在需要時(shí)顯示滾動(dòng)條。

.element { 
    height: 300px; 
    overflow-y: auto; 
} 

事例源碼：https://codepen.io/shadeed/pen/vQYwXj

3.添加 flex-wrap

對(duì)包含多個(gè)子元素使用 display: flex，如果元素過多，所有子元素會(huì)被壓縮，如下所示：

<div class="wrapper"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div> 
 
 
.wrapper { 
  display: flex; 
} 
 
.item { 
  flex: 0 0 120px; 
  height: 100px; 
} 

面的例子在大屏幕上非常有用。在移動(dòng)設(shè)備上，瀏覽器會(huì)顯示一個(gè)水平滾動(dòng)條。

解決方法就是使用 flex-wrap: wrap，這樣當(dāng)水平空間不夠時(shí)，瀏覽器會(huì)幫我們自動(dòng)換行。

事例源碼：https://codepen.io/shadeed/pen/JejVLG

4. 當(dāng) Flex 項(xiàng)目的數(shù)量是動(dòng)態(tài)的時(shí)，不要使用justify-content: space-between

當(dāng)將justify-content: space-between應(yīng)用于flex容器時(shí)，它將分配元素并在元素之間留出相等的空間。我們的示例有8個(gè)卡片項(xiàng)，它們看起來不錯(cuò)。如果，由于某種原因，項(xiàng)目的數(shù)量是7呢?第二行元素看起來與第一行不同。

在這種情況下，使用CSS網(wǎng)格會(huì)更合適。

事例源碼：https://codepen.io/shadeed/pen/XyWLLo

5. 長單詞和鏈接

當(dāng)在移動(dòng)屏幕上閱讀一篇文章時(shí)，一個(gè)長單詞或內(nèi)聯(lián)鏈接可能會(huì)導(dǎo)致出現(xiàn)水平滾動(dòng)條。使用CSS word-break可以防止這種情況的發(fā)生

解決方法：

.article-content p { 
    word-break: break-all; 
} 

6.透明漸變

當(dāng)漸變是以 transparent 開始或者結(jié)束的時(shí)候，在Safari中看起來會(huì)有點(diǎn)黑。這是因?yàn)镾afari不能識(shí)別關(guān)鍵字transparent，這里可以通過rgba(0,0,0,0)來解決該問題。請注意下面的截圖：

出問題的代碼:

.section-hero { 
  background: linear-gradient(transparent, #d7e0ef), #527ee0; 
  /*Other styles*/ 
} 

解決方式:

.section-hero { 
  background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0; 
  /*Other styles*/ 
} 

7.關(guān)于CSS網(wǎng)格中auto-fit和auto-fill之間的差異的誤解

在CSS grid中，repeat函數(shù)可以創(chuàng)建響應(yīng)列布局，而不需要使用媒體查詢。要做到這一點(diǎn)，使用auto-fill或auto-fit即可。

.wrapper { 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
} 

簡而言之，auto-fill將在不擴(kuò)展列寬的情況下對(duì)列進(jìn)行排列，而auto-fit只會(huì)在列為空的情況下將列折疊到零寬度。

8. 當(dāng)視口不夠高時(shí)將元素固定在屏幕頂部

如果將元素固定在屏幕頂部，如果視口不夠高會(huì)發(fā)生什么情況?很簡單:它會(huì)占用屏幕空間，因此，用戶瀏覽網(wǎng)站時(shí)可用的垂直區(qū)域就會(huì)變小，這會(huì)影響用戶的體驗(yàn)。解決方法不是當(dāng)用戶往下劃動(dòng)的時(shí)候，固定頭部需要回到文檔中跟隨屏幕滾動(dòng)，可以使用position: sticky來快速達(dá)到該效果。

@media (min-height: 500px) { 
    .site-header { 
        position: sticky; 
        top: 0; 
        /*other styles*/ 
    } 
} 

在上面的代碼段中，我們告訴瀏覽器僅在視口的高度等于或大于 500`像素時(shí)才標(biāo)題固定在頂部。

使用 position: sticky 還需要指定 top 值，不然它無法正常工作。

事例源碼：https://codepen.io/shadeed/pen/oQLYmg

9.設(shè)置圖像的最大寬度

當(dāng)添加圖像時(shí)，定義max-width: 100%，這樣當(dāng)屏幕很小時(shí)圖像就會(huì)改變大小。否則，瀏覽器將顯示一個(gè)水平滾動(dòng)條。

img { 
    max-width: 100%; 
} 

10. 使用 CSS grid 定義 main 和 aside 元素

CSS grid 常規(guī)布局中 main 和 aside 部分，為了讓布局更加的完美，我們應(yīng)該讓aside 高度等于 main 高度，即使 aside 內(nèi)容為空。

要解決這個(gè)問題，將aside元素對(duì)齊到其父元素的開始位置，這樣它的高度就不會(huì)擴(kuò)大。

.wrapper { 
  display: grid; 
  grid-template-columns: repeat(12, minmax(0, 1fr)); 
  grid-gap: 20px; 
} 
 
// align-self will tell the aside element to align itself with the start of its parent. 
aside { 
  grid-column: 1 / 4; 
  grid-row: 1; 
  align-self: start; 
} 
 
main { 
  grid-column: 4 / 13; 
} 

事例源碼: https://codepen.io/shadeed/pen/yQJgXr

11. 向 SVG 添加 fill

有時(shí)，在使用 SVG 時(shí)，如果在 SVG 中以內(nèi)聯(lián)方式添加了fill屬性，填充就不會(huì)像預(yù)期的那樣工作。要解決這個(gè)問題，可以從SVG本身刪除fill屬性，也可以覆蓋fill: color。

舉個(gè)例子：

.some-icon { 
    fill: #137cbf; 
} 

如果 SVG 具有內(nèi)聯(lián)fill，這將不起作用，應(yīng)該這樣寫:

.some-icon path { 
    fill: #137cbf; 
} 

12. 使用偽元素

我經(jīng)常使用偽元素，它們?yōu)槲覀兲峁┝艘环N創(chuàng)建偽造元素的方法，主要用于裝飾目的，而無需將其添加到HTML中。

使用它們時(shí)，我們經(jīng)常會(huì)忘記下面這些步驟：

• 添加content: ""屬性
• 設(shè)置 width 和 height 時(shí)沒有設(shè)置 display 導(dǎo)致 width 和 height無效

在使用偽元素的時(shí)候，記得要添加 content 屬性，不然會(huì)無法顯示其內(nèi)容，別外也需要定義 display ，設(shè)置寬高才有效。

13. 使用 display: inline-block 會(huì)出現(xiàn)怪異的空格

為多個(gè)元素設(shè)置 display: inline-block或 display: inline，會(huì)在每個(gè)元素之間創(chuàng)建一個(gè)很小的空格。之所以會(huì)添加空格，是因?yàn)闉g覽器將元素解釋為單詞，因此在每個(gè)元素之間添加了一個(gè)字符空間。

在下面的示例中，每個(gè)項(xiàng)目的右側(cè)都有8px的空間，但是由于使用display：inline-block導(dǎo)致增加了一個(gè)空格，最后結(jié)果是12px，這不是期望的結(jié)果。

一個(gè)簡單的修復(fù)方法是在父元素上設(shè)置font-size: 0。

ul { 
    font-size: 0; 
} 
 
li { 
    font-size: 16px; 
} 

事例源碼：https://codepen.io/shadeed/pen/qQYPxV

14. 為 input 元素配置 label 記得加上 for="ID"

在處理表單元素時(shí)，可以為label元素分配一個(gè)id，這將增加表單的可訪問性，當(dāng)label 元素被點(diǎn)擊時(shí)，對(duì)應(yīng)的 input 也會(huì)獲取焦點(diǎn)。

<label for="emailAddress">Email address:</label> 
<input type="email" id="emailAddress"> 

15. 字體與交互式HTML元素不兼容

當(dāng)為整個(gè)文檔設(shè)置字體時(shí)，它們不會(huì)應(yīng)用于input、button、select和textarea等元素。它們在默認(rèn)情況下不會(huì)繼承，因?yàn)闉g覽器將默認(rèn)系統(tǒng)字體應(yīng)用于它們。

要修復(fù)此問題，需要我們手動(dòng)分配字體屬性：

input, button, select, textarea { 
  font-family: your-awesome-font-name; 
} 

16. 水平滾動(dòng)條

由于元素的寬度，有些元素會(huì)導(dǎo)致出現(xiàn)水平滾動(dòng)條。

找到這個(gè)問題的原因最簡單的方法就是使用 「CSS outline」。Addy Osmani 分享了一個(gè)非常方便的腳本，可以添加到瀏覽器控制臺(tái)，列出頁面上的每個(gè)元素。

[].forEach.call($$("*"), function(a) { 
  a.style.outline = 
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16); 
}); 

17. 壓縮或拉伸圖像

在CSS中調(diào)整圖像大小時(shí)，如果寬高比與圖像的寬度和高度不一致，則可能會(huì)對(duì)其進(jìn)行壓縮或拉伸。

解決方法很簡單:使用CSS object-fit，它的功能類似于ackground-size: cover用于背景圖像。

img { 
    object-fit: cover; 
} 

使用object-fit并不是在所有情況下都適用。有些圖片需要在沒有裁剪或調(diào)整大小的情況下顯示，有些平臺(tái)會(huì)強(qiáng)制用戶上傳或裁剪一個(gè)定義大小的圖片。例如，Dribbble接受以800 * 600像素上傳的縮略圖。

18. 為 input 添加正確的 type

為 input 添加正確的 type，會(huì)增強(qiáng)移動(dòng)瀏覽器中的用戶體驗(yàn)，并使其更易于用戶訪問。

假設(shè)有如下的 HTML 代碼：

<form action=""> 
  <p> 
    <label for="name">Full name</label> 
    <input type="text" id="name"> 
  </p> 
  <p> 
    <label for="email">Email</label> 
    <input type="email" id="email"> 
  </p> 
  <p> 
    <label for="phone">Phone</label> 
    <input type="tel" id="phone"> 
  </p> 
</form> 

下面是每個(gè) input 元素在移動(dòng)端輸入的樣子。

19. RTL 布局的電話號(hào)

在從右到左的布局中添加電話號(hào)碼(如+ 972-123555777)時(shí)，加號(hào)將定位在電話號(hào)碼的末尾。要解決這個(gè)問題，重新分配電話號(hào)碼的方向即可。

p { 
    direction: ltr; 
} 

總結(jié)

里提到的所有問題都是我在前端開發(fā)工作中遇到的最常見的問題，希望能對(duì)你們有些幫助。

作者：Chidume Nnamdi 譯者：前端小智 來源：smashingmagazine

本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系 大遷世界公眾號(hào)。