css3属性border-radius与border-image不兼容
相关参考 css3属性border-radius与border-image不兼容解决办法 - 掘金 (juejin.cn)
相关参考 css3属性border-radius与border-image不兼容解决办法 - 掘金 (juejin.cn)
参考文档 浏览器的回流与重绘 (Reflow & Repaint) - 掘金 (juejin.cn)
解决方案 flex元素添加min-width:0属性 gird子元素添加min-width:0属性 参考文档 css - Ellipsis in flexbox container - Stack Overflow
不使用id或者属性选择器 为了尽可能的复用class，如小程序wxml和html标签就不同，使用属性就不好复用。 命名遵循bem方法论 虽然写起来有点复杂，但是结构清晰，规范知名度较高，常用的ui组件库均采用bem方法论，如vant,elem...
需求场景 考虑以下场景，A元素包含B，C元素，B元素包含B1元素，C元素包含C1元素。为什么C1元素的z-index明明很高，却始终在B1元素下面？ <div id="A" style="position: relative;"> <div id="B"> ...
需求场景 在移动端，部分手机的input当type为number时会出现上下箭头。 解决方案 input[type='number'] { -moz-appearance: textfield; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webk...
需求场景 最近有个需求，需要做pc端大屏页面，一般pc端都采用定宽的设计方式，这样兼容各个屏幕比较容易，直接用px即可。因为项目需要投大屏，所以采用了流式布局，考虑到需要适配各个分辨率的屏幕，故采用了rem单位。可奇怪的是，在3...
需求场景 textarea在设置了disable之后在安卓手机上显示正常，但ios系统手机上就会显示边框，背景为半透明，字体颜色为灰色。 解决方案 input:disabled, textarea:diabled { -webkit-opacity: 1; -webkit-text-fill...
需求场景 最近在开发小程序时，遇到如下需求：之前固定在右侧的展开折叠按钮会挡住计数器，所以希望可以手动调整按钮的位置，使其可以上下拖动。看了下官方文档，movable-area，movable-view是最快的解决方式。可当开发完成时，发...
前沿 一个html页面，是由多种html标签如div,p,a,img,input等构成。每个标签都是一个元素。除了flex和table，block,inline,inline-block是最为常用的显示方式。 block块状元素 块状元素最明显的特征就是会换行。多个块状元素会多行显示...