【譯】小智在這3年開發中遇到的 CSS 問題及解決方案，有大佬幫他總結好了！

時間 2020-06-21

標籤 3年開發遇到 css 問題解決方案大佬幫他總結好了欄目 CSS 简体版

原文原文鏈接

做者：Chidume Nnamdi 譯者：前端小智來源：smashingmagazinecss

在瀏覽器中實現用戶界面時，請儘量減小瀏覽器帶來的差別，以使用戶界面具備可預測性。跟蹤全部這些差別很困難，所以，我整理了一些常見問題及其解決方案方便你們查看。前端

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

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

重置按鈕的樣式能夠解決些問題：github

button {
  appearance: none;
  background: transparent;
}

複製代碼

事例源碼：codepen.io/shadeed/pen…面試

2.Overflow: scroll Vs auto

要限制元素的高度並容許用戶在其中滾動，能夠添加overflow: scroll-y。在 macOS 上的Chrome上會很好看。然而，在 Windows上，滾動條老是在那裏(即便內容很短)。這是由於不管內容如何，scroll-y都會顯示滾動條，這時候咱們可使用overflow: auto，它只會在須要時顯示滾動條。瀏覽器

.element {
    height: 300px;
    overflow-y: auto;
}
複製代碼

事例源碼：codepen.io/shadeed/pen…bash

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;
}
複製代碼

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

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

事例源碼：codepen.io/shadeed/pen…

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

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

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

事例源碼：codepen.io/shadeed/pen…

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 值，否則它沒法正常工做。

事例源碼：codepen.io/shadeed/pen…

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

複製代碼

事例源碼: codepen.io/shadeed/pen…

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; 
}
複製代碼

事例源碼：codepen.io/shadeed/pen…

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>

複製代碼