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

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

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

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

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

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

button {
  appearance: none;
  background: transparent;
}

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

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/pe...

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/pe...

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

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

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

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

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

總結

裏提到的全部問題都是我在前端開發工做中遇到的最多見的問題，但願能對大家有些幫助。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://www.reddit.com/r/css/...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。