1.重置button和input元素的背景
添加一个按钮时，重置它的背景，否则它会在不同的浏览器中看起来不同。在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。
重置按钮的样式可以解决些问题： 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…
3.添加 flex-wrap
对包含多个子元素使用 display: flex，如果元素过多，所有子元素会被压缩，如下所示：
.wrapper { display: flex; }
.item { flex: 0 0 120px; height: 100px; } 复制代码面的例子在大屏幕上非常有用。在移动设备上，浏览器会显示一个水平滚动条。
解决方法就是使用 flex-wrap: wrap，这样当水平空间不够时，浏览器会帮我们自动换行。 事例源码：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/ }
