常见的 css 坑

发表于 2020-02-25 更新于 2024-06-27 分类于开发笔记， css

Safari 中 flex 包含图片高度暴走

详情:

Safari 中 flex 容器包含一个图片时图片加载完成后高度会暴走

解决方案:

不这样用
限制宽度的图片利用竖向 flex
限制高度的图片利用横向 flex

安卓文本无法垂直居中问题

默认情况下使用 line-height: height 就可以实现单行文字内容的垂直居中对齐, 但是当文字字体小于 12px 的时候(或者是基数的倍数的时候) 实际上字体就会向上偏移一点. 有的手机上表现着实离谱, 完全没法忽悠设计的地步了…

缩放的方法

既然字体是基数的倍数的时候会偏移, 那么先把字体大小放大 1 倍, 然后再通过 transform 缩小就搞定了

1
2
3

<div style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
    我就是要居中
</div>

flex or 内边距 + line-height: nomal

1
2
3

<div style="display: flex; align-item: center; line-height: normal; font-size: 10px;">
    我就是要居中
</div>

1
2
3

<div style="box-sizing: border-box; padding: 0 10px; line-height: normal; font-size: 10px;">
    我就是要居中
</div>

position: fixed; 作为 transform 元素子元素

这是一个十年前就有人问过的问题 stackoverflow当你的 position: fixed; 的元素包裹在使用了 transform 属性的元素的时候, fixed 定位就会失效, 不能固定定位了.

参考文档:

iOS 10 直接使用 ele.style = “” bug

在写 js 蒙层的时候为了方便直接写了 modalEle.style = "width: 100%; height: 100%;" 在安卓中没啥问题. 但是在 iOS 10 上报了错误 attempted to assign to readonly property 尝试分配只读属性. 也就是说 ele.style 不能重新赋值不能只能修改其属性, 修改为一下代码即可解决: