原文地址：CommonCSSIssuesForFront-EndProjects原作者：AhmadShadeed译者：Chor快速总结：近年来，跨浏览器的渲染和交互越来越一致。尽管如此，它仍然不完全一致，并且有很多小事情会让你失望。除了这些问题，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定性，我们从中发现了很多会让开发者出错的小问题。在浏览器中实现用户界面时，最好尽可能减少这些差异和问题，以便UI的行为可预测。记住所有这些差异可能很困难，因此我列出了常见问题和解决方案。在您处理新项目时，可以将其用作方便的参考指南。让我们开始吧。1.重置按钮和输入元素的背景添加按钮时，重置其背景，否则跨浏览器呈现不同。下面的示例显示了Chrome和Safari中的相同按钮，默认情况下具有灰色背景。(大图预览)重置背景可以解决这个问题：button{appearance:none;背景：透明；/*其他样式*/}https://codepen.io/shadeed/pe...请参阅Codepen上的AhmadShadeed(@shadeed)代码按钮和输入框。2.overflow:scroll和auto要限制元素的高度并允许用户滚动它，请添加overflow:scroll-y。在macOS下的Chrome中，这看起来不错，但在Windows下的Chrome中，滚动条始终存在（即使内容非常短）。这是因为无论内容如何，??scroll-y都会始终显示滚动条。而overflow:auto只会在需要时显示滚动条。左：macOS上的Chrome。右：Windows上的Chrome（大预览）.element{height:300px;overflow-y:auto;}https://codepen.io/shadeed/pe...在CodepenCodeoverflow-y上查看AhmadShadeed(@shadeed)。3.添加flex-wrap要使元素表现得像flex容器，只需添加display:flex。但是，如果不加flex-wrap，那么当屏幕尺寸缩小时，会出现水平滚动条。
