小智在这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和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。