CSS常见问题概览

CSS样式错乱

样式在 PC 端 Chrome 浏览器中显示正常，在部分手机上错乱。

原因： 样式缺少前缀。webpack 项目中通过 autoprefixer 自动给样式加前缀（即，加 ``-webkit, -ms, -moz-, -o-` 等前缀），而具体需要对哪些浏览器哪些版本加前缀，是通过配置决定的。

"browserslist": [
    "> 1%",
    "last 2 versions"
]

其中 last 2 versions 是指定对最新的两个版本加前缀，这个指定是不固定。随着浏览器的更新，所指向的版本也变化，导致autoprefixed 不对之前的一些旧版本加前缀。

解决方法： 在 package.json 文指定需要加前缀的浏览器及对应版本，当然，也可以用其他文档形式配置。

"browserslist": [
    "> 1%",
    "last 2 versions",
    "Android >= 3.2",
    "Firefox >= 20",
    "iOS >= 7",
    "chrome >  20"
]

transform: scale引起的元素模糊问题

CSS 中使用 transform: scale(1.18) 放大元素，元素中的文字图片变模糊。

原因：大概原理就是 scale 的时候导致了 font-size 算出了小数，所以 Chrome 就模糊了处理，而且只会发生在复杂的 DOM 结构里，很简单的 DOM 结构，是不会发生模糊的。因为 Chrome 在处理这种复杂 Dom 结构的缩放的时候，把 Dom 结构渲染成了一张图，然后对图片进行缩放。

解决：对原有的 Dom 结构，先进行 zoom，慢慢调试到 scale 之后文字不模糊的程度就 ok了。目前采用调整 scale 倍数的方法，即scale(1.18) 改成 scale(1.2)。

其他尝试： 加 translateZ(0)、translate3d(0,0,0) 的解决方案，亲测无效。

A标签伪类问题

  • 问题一： :active 在移动端无效。

    解决： 在元素或 body/html 上绑定一个 touchstart 事件能激活 :active 状态。

  • 元素使用 :active，点击字体颜色会默认到 :visited 的默认颜色，需同时设置 :active、:visited 的颜色。

  • 伪类的优先有：

表单元素的placeholder文本不居中

  • PC端：line-height: [和表单元素的高度一样]；

  • 移动端：line-height：normal 。

CSS动画页面闪动，动画卡顿

尽可能地使用合成属性 transform、opacity 来设计CSS3动画，不使用 position: left | top 来定位 。

box-sizing属性

content-box：设置的高度不包括上下 border、padding；宽度包括左右 border、padding；

border-box：设置的宽高值包括 border、padding。

背景边框的问题

背景图片大小

渐变颜色

透明色

IOS中 background 渐变色中 transparent 显示为黑色。

**错误解决方法：**将 transparent 改成 rgba(255,255,255,0)。

**正确解决方法：**将 transparent 改成 rgba(249,18,80,0)，即将透明色前的色值 #f91250 转换成 rgba 值，并设置透明度设为0。

圆形有些扁

元素设置 border-radius: 100px（大于元素宽高），圆形有些扁。

父标签字体大小设置为零，由子标签设置 font-size 属性。

底部的导航栏挡住

body 设置 height: 100% 后被底部的导航栏挡住。

滚动条未隐藏

body 设置 width: 100%; overflow: hidden，仍有 X 方向滚动条。

原因： body 没有设置 postion:relative，且有子元素中有绝对定位元素宽度超过屏幕宽度。

-webkit的问题

  • 禁止用户选中文字：-webkit-user-select:none；

  • 去掉按钮touch时蓝色边框 : -webkit-tap-highlight-color:rgba(0,0,0,0)；

  • 去除webkit的滚动条: ::-webkit-scrollbar{ display: none; }；

  • 禁止保存或者拷贝图像(仅ios有效) : img { -webkit-touch-callout: none; } ；

  • 禁止选中内容 htm: { -webkit-user-select: none;} ；

  • 修改表单元素中placeholder 的样式： ::-webkit-input-placeholder{ }；

  • 去除表单元素的默认样式: -webkit-appearance:none； 如select、input；

  • input type=number之后，PC 端出现上下箭头：

  • 快速回弹滚动 (iOS上拥有像Native 的滚动效果)

table样式的问题

  • td 用 col 设置了宽度后超出部分隐藏：table 加属性 table-layout:fixed（固定宽度布局） ;

  • col 和 colgroup 发挥作用且保证兼容的应用就只有俩： width、background ；

  • table 定义了 border-collapse:collapse 属性，border-spacing 属性不生效；

  • table中 实现圆角效果：在 table 中设置 border-radius 发现不起作用，原因是 border-collapse: collapse 和 border-radius 不兼容。以下方法解决**（chrome试验可行，未测手机兼容性）**：

旧手机上的问题（机型可能已淘汰）

border-radius失效

  • 部分 Android 不识别百分比单位，可设置一个较大值的px、em、rem单位；

  • 部分手机下，width 值过大，border-radius 无效；

  • Android 4.2.x 不支持 border-radius 缩写；

  • Samsung S4 (Android Browser4.4.2)

    使用了 border-radius，并且使用了 -webkit-transform 属性，当使用了 translatez 或者 translate3d 值，圆角会出现问题，可用 -webkit-transform: translate(0, 0) 来避免这个问题。

  • Android 4.x bug

    • 三星 Galaxy S4中自带浏览器不支持border-radius缩写

    • 同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分

    • 部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色

    • android无法同时播放多音频audio

上一页HTML常见问题概览下一页JS常见问题概览

最后更新于

这有帮助吗？