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

[[329670]]

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

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

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

button { 
  appearance: none; 
  background: transparent; 
} 

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

2.Overflow: scroll Vs auto

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

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

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

3.添加 flex-wrap

對包含多個子元素使用 display: flex，如果元素過多，所有子元素會被壓縮，如下所示：

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

面的例子在大屏幕上非常有用。在移動設備上，瀏覽器會顯示一個水平滾動條。

解決方法就是使用 flex-wrap: wrap，這樣當水平空間不夠時，瀏覽器會幫我們自動換行。

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

4. 當 Flex 項目的數量是動態的時，不要使用justify-content: space-between

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

在這種情況下，使用CSS網格會更合適。

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

5. 長單詞和鏈接

當在移動屏幕上閱讀一篇文章時，一個長單詞或內聯鏈接可能會導致出現水平滾動條。使用CSS word-break可以防止這種情況的發生

解決方法：

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

6.透明漸變

當漸變是以 transparent 開始或者結束的時候，在Safari中看起來會有點黑。這是因為Safari不能識別關鍵字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.關于CSS網格中auto-fit和auto-fill之間的差異的誤解

在CSS grid中，repeat函數可以創建響應列布局，而不需要使用媒體查詢。要做到這一點，使用auto-fill或auto-fit即可。

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

簡而言之，auto-fill將在不擴展列寬的情況下對列進行排列，而auto-fit只會在列為空的情況下將列折疊到零寬度。

8. 當視口不夠高時將元素固定在屏幕頂部

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

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

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

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

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

9.設置圖像的最大寬度

當添加圖像時，定義max-width: 100%，這樣當屏幕很小時圖像就會改變大小。否則，瀏覽器將顯示一個水平滾動條。

img { 
    max-width: 100%; 
} 

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

CSS grid 常規布局中 main 和 aside 部分，為了讓布局更加的完美，我們應該讓aside 高度等于 main 高度，即使 aside 內容為空。

要解決這個問題，將aside元素對齊到其父元素的開始位置，這樣它的高度就不會擴大。

.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

有時，在使用 SVG 時，如果在 SVG 中以內聯方式添加了fill屬性，填充就不會像預期的那樣工作。要解決這個問題，可以從SVG本身刪除fill屬性，也可以覆蓋fill: color。

舉個例子：

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

如果 SVG 具有內聯fill，這將不起作用，應該這樣寫:

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

12. 使用偽元素

我經常使用偽元素，它們為我們提供了一種創建偽造元素的方法，主要用于裝飾目的，而無需將其添加到HTML中。

使用它們時，我們經常會忘記下面這些步驟：

• 添加content: ""屬性
• 設置 width 和 height 時沒有設置 display 導致 width 和 height無效

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

13. 使用 display: inline-block 會出現怪異的空格

為多個元素設置 display: inline-block或 display: inline，會在每個元素之間創建一個很小的空格。之所以會添加空格，是因為瀏覽器將元素解釋為單詞，因此在每個元素之間添加了一個字符空間。

在下面的示例中，每個項目的右側都有8px的空間，但是由于使用display：inline-block導致增加了一個空格，最后結果是12px，這不是期望的結果。

一個簡單的修復方法是在父元素上設置font-size: 0。

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

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

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

在處理表單元素時，可以為label元素分配一個id，這將增加表單的可訪問性，當label 元素被點擊時，對應的 input 也會獲取焦點。

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

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

當為整個文檔設置字體時，它們不會應用于input、button、select和textarea等元素。它們在默認情況下不會繼承，因為瀏覽器將默認系統字體應用于它們。

要修復此問題，需要我們手動分配字體屬性：

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

16. 水平滾動條

由于元素的寬度，有些元素會導致出現水平滾動條。

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

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

17. 壓縮或拉伸圖像

在CSS中調整圖像大小時，如果寬高比與圖像的寬度和高度不一致，則可能會對其進行壓縮或拉伸。

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

img { 
    object-fit: cover; 
} 

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

18. 為 input 添加正確的 type

為 input 添加正確的 type，會增強移動瀏覽器中的用戶體驗，并使其更易于用戶訪問。

假設有如下的 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> 

下面是每個 input 元素在移動端輸入的樣子。

19. RTL 布局的電話號

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

p { 
    direction: ltr; 
} 

總結

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

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

本文轉載自微信公眾號「 大遷世界」，可以通過以下二維碼關注。轉載本文請聯系 大遷世界公眾號。