当前位置：首页 > 科技观察

在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了

时间：2023-03-15 19:33:35 科技观察

近3年开发中遇到的CSS问题和解决办法都帮他总结了。是可预测的。跟踪所有这些差异可能很困难，因此为了方便起见，我整理了一些常见问题及其解决方案。1.重置按钮和输入元素的背景添加按钮时，重置其背景，否则在不同的浏览器中看起来会有所不同。在下面的示例中，相同的按钮在Chrome和Safari中，后者添加了默认的灰色背景。重置按钮的样式可以解决一些问题：button{appearance:none;background:transparent;}案例源码：https://codepen.io/shadeed/pen/MzWBYv2.Overflow:scrollVsauto来限制高度该元素并允许用户在其中滚动，您可以添加overflow:scroll-y。它在macOS上的Chrome上看起来很棒。但是，在Windows上，滚动条始终存在（即使内容很短）。这是因为scroll-y不管内容是什么都会显示滚动条，这时候我们可以使用overflow:auto，只在需要的时候显示滚动条。.element{height:300px;overflow-y:auto;}示例源代码：https://codepen.io/shadeed/pen/vQYwXj3。添加flex-wrap以将display:flex用于多个子元素。如果元素过多，所有子元素将被压缩为：

.wrapper{display:flex;}.item{flex:00120px;height:100px;}上面的例子在大屏幕上非常有用。在移动设备上，浏览器显示水平滚动条。解决方法是使用flex-wrap:wrap，这样当水平空间不够用时，浏览器会自动帮我们换行。示例源代码：https://codepen.io/shadeed/pen/JejVLG4。当flex项目的数量是动态的时，不要使用justify-content:space-between将justify-content:space-between应用到f??lexcontainers时，将分配元素并在它们之间留出相等的空间。我们的示例有8个卡片项目，它们看起来不错。如果由于某种原因，项目的数量是7怎么办？第二行元素看起来与第一行不同。在这种情况下，使用CSSGrid会更合适。示例源代码：https://codepen.io/shadeed/pen/XyWLLo5。长词和链接在手机屏幕上阅读文章时，长词或内联链接可能会导致出现水平滚动条。使用CSSword-break来防止这种情况发生解决方案：.article-contentp{word-break:break-all;}6.透明渐变当渐变以透明开始或结束时，在Safari中看起来会有点黑色。这是因为Safari不识别关键字transparent，这里可以使用rgba(0,0,0,0)来解决这个问题。请注意下面的截图：问题代码：.section-hero{background:linear-gradient(transparent,#d7e0ef),#527ee0;/*Otherstyles*/}解决方案：.section-hero{background:linear-gradient(rgba(0,0,0,0),#d7e0ef),#527ee0;/*Otherstyles*/}7.CSSgrid中auto-fit和auto-fill区别的误解在CSSgrid中，repeat函数可以创建responsivecolumn不使用媒体查询的布局。为此，请使用自动填充或自动调整。.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;/*otherstyles*/}}在上面的代码片段中，我们告诉浏览器仅在视口高度达到时才使用它等于或大于500`像素以将标题固定在顶部。使用position:sticky也需要指定top值，否则无法正常使用。示例源代码：https://codepen.io/shadeed/pen/oQLYmg9。设置图片的最大宽度添加图片时，定义max-width:100%，这样图片在屏幕小的时候会改变尺寸。否则，浏览器将显示水平滚动条。img{max-width:100%;}10.使用CSSgrid定义main和aside元素CSSgrid常规布局的main和aside部分，为了让布局更完美，我们应该让aside的高度等于主要高度，即使旁边的内容为空。要解决此问题，请将aside元素与其父元素的开头对齐，这样它的高度就不会增加。.wrapper{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-gap:20px;}//align-self会告诉asideelement将自己与startofitsparent.aside{grid-column:1/4;grid-row:1;align-self:start;}main{grid-column:4/13;}示例源代码：https://codepen.io/shadeed/pen/yQJgXr11。向SVG添加填充有时，在使用SVG时，如果在SVG中内联添加填充属性，填充将不会按预期工作。要解决此问题，请从SVG本身中删除fill属性，或覆盖fill:color。例如：.some-icon{fill:#137cbf;}如果SVG有内联填充，这样就不行了，应该这样写：.some-iconpath{fill:#137cbf;}12.使用伪元素我经常使用伪元素，它们为我们提供了一种创建假元素的方法，主要用于装饰目的，而无需将它们添加到HTML中。在使用的时候，我们经常会忘记下面的步骤：添加content:""属性设置宽高，没有设置显示，导致宽高无效使用伪元素的时候，记得添加content属性，否则它的内容不会显示displayed，还需要定义display，设置宽高有效。13.使用display:inline-blockcreatesweirdspaces设置display:inline-block或display:inlineformultipleelements在每个元素之间创建一个微小的空间。添加空格是因为浏览器将元素解释为单词，因此在每个元素之间添加了一个字符空格。下面的例子中，每个item右边有8px的空间，但是由于使用了display:inline-block增加了一个空间，最后的结果是12px，并不是想要的结果。一个简单的修复是在父元素上设置font-size:0。ul{font-size:0;}li{font-size:16px;}示例源代码：https://codepen.io/shadeed/pen/qQYPxV14。为input元素配置label，处理时记得加上for="ID"对于表单元素，可以给label元素赋一个id，这样会增加表单的可访问性。当label元素被点击时，对应的input也会获得焦点。电子邮件地址：15.字体与交互式HTML元素不兼容当为整个文档设置字体时，它们不会应用于input、button、select和textarea等元素。默认情况下它们不会被继承，因为浏览器会为它们应用默认的系统字体。要解决这个问题，我们需要手动分配字体属性：input,button,select,textarea{font-family:your-awesome-font-name;}16.水平滚动条由于元素的宽度，有些元素会导致水平滚动条。查找此问题原因的最简单方法是使用“CSS大纲”。AddyOsmani分享了一个非常方便的脚本，可以将其添加到浏览器控制台以列出页面上的每个元素。[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24)))。toString(16);});17.压缩或拉伸图像在CSS中调整图像大小时，如果纵横比与图像的宽度和高度不匹配，则可能会压缩或拉伸图像。解决方案很简单：使用CSSobject-fit，其工作方式与background-size类似：覆盖背景图像。img{object-fit:cover;}使用object-fit并不适用于所有情况。一些图像需要在不裁剪或调整大小的情况下显示，一些平台强制用户上传或裁剪具有定义大小的图像。例如，Dribbble接受以800*600像素上传的缩略图。18.向输入添加正确的类型向输入添加正确的类型将增强移动浏览器的用户体验，并使用户更容易访问。假设有以下HTML代码：

Fullname

邮箱

电话

下面是每个input元素在移动端的样子。19.RTL布局中的电话号码在从右到左布局中添加电话号码（如+972-123555777）时，加号将位于电话号码的末尾。要解决此问题，只需重新分配电话号码的方向即可。p{direction:ltr;}总结中提到的所有问题都是我在前端开发工作中遇到的最常见的问题，希望对大家有所帮助。

上一篇：微软放弃继续开发VisualBasic

下一篇：你应该成为Web开发人员的5大理由

在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了相关文章

最新推荐

猜你喜欢