border-radius我相信对于老一辈的前端们有着特殊的感情,在经历了没有圆角的蛮荒时代,到如今 CSS3 遍地开花,我们还是很幸福的。

然而即使到了三星大脸流行时代,border-radius在移动端的表现依旧差强人意,主要有两点问题:

一、Android 2.3 自带浏览器不支持 %

通常我们实现一个正圆只需要border-radius: 50%即可,大致代码如下:

.foo {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid blue;
}

然而 Android 2.3 是不支持百分比的,要兼容我们只能使用一个较大值,比如border-radius: 999px;

二、Android 及 Safari 低版本 img 圆角问题

当 img 元素有border 时设置border-radius 会导致圆角变形,需要在img 外面嵌套一个元素并设置border 和border-radius。

Demo


图一:左侧是小米2S(Android 4.1),右侧是红米(Android 4.2)

三、Android 4.2.x 背景色溢出及不支持 border-radius 缩写

3.1 Android 4.2.x 背景色溢出

测试发现,在 Android 4.2.x 系统自带浏览器中,同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分,需要是使用background-clip: padding-box;来修复,但是如果border-color为半透明时,背景直角部分依然会露出来(参见图一)。

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

这个 BUG在小米上测试并未发现,国外有人反映三星 Galaxy S4 中自带浏览器不支持。

解决方案就是使用border-radius的四个扩写属性,缩写属性放到最后。

以上两个问题影响到 Android 4.2.x 内核的系统以及在其基础上定制的系统的自带浏览器,比如:红米,小米3,阿里云OS 等,安卓版 Chrome 不受影响。

完整代码应该是这样的:

.foo {
width: 100px;
height: 100px;
border: 5px solid blue;
border-top-left-radius: 999px; /* 左上角 */
border-top-right-radius: 999px; /* 右上角 */
border-bottom-right-radius: 999px; /* 右下角 */
border-bottom-left-radius: 999px; /* 左下角 */
border-radius: 999px;
background-color: #ccc;
background-clip: padding-box;
}

四、其他问题

  1. IE9 中fieldset元素不支持border-radius
  2. IE9 中带有背景渐变(gradient)的时候背景溢出。

感谢@方元 同学帮忙测试,欢迎反馈更多移动端 CSS 的问题。

原文地址:https://github.com/yisibl/blog/issues/2

border-radius bug 收集的更多相关文章

  1. IE & table & border & border-collapse & bug

    shit IE table border bug & border-collapse bug > `border-collapse: collapse;` table { width: ...

  2. IE6对CSS支持Bug收集

    1.IE6双外边距 在IE6下,如果对元素设置了浮动,同时又设置了margin-left或者margin-right,margin值会加倍. 例如,设置margin-left:10px在IE6下会显示 ...

  3. input border IE6 bug

    border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异. 1.性能差异[border:0;]把border设为“0”像素虽然在页面上看不见,但按bor ...

  4. angularjs使用BUG收集和解决办法

    此文章涉及到时1.X的版本.请注意! 1.关于checkbox和bootstrap不能选中BUG 在使用angularjs的时候,有个比较明显的bug ng-disabled无效的情况 这里是一种情况 ...

  5. Kettle bug收集

    20160919(未确定): 加载表的使用"Use batch update for inserts"会引致奇怪的转换失败? 出错日志: - linenr 450000- line ...

  6. ie6 bug 收集

    1.IE6中奇数宽高的BUG IE6下查看,变成了right:1px的效果了: IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数.高度也是一样的查看源码: CSS代码: #o ...

  7. Xcode运行的错误bug收集

    libopencore-amrnb.a(wrapper.o)' does not contain bitcode. You must rebuild it with bitcode enabled ( ...

  8. ☀【CSS3】形状

    CSS3shapeshttp://www.css3shapes.com/ <!DOCTYPE html> <html lang="zh-CN"> <h ...

  9. CSS模版收集

    Css Reset by Eric MeyerURL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-develo ...

随机推荐

  1. Ubuntu 搭建Ghost1.0博客系统

    最近想使用Ghost搭建自己的博客网站,网上搜索了下大多都是1.0之前版本搭建的文章,但是Ghost1.0版本已经可用好一段时间了,所以决定根据官方文档搭建Ghost1.0版本的博客系统. 下面开始一 ...

  2. SecureCRT来上传和下载文件

    引用:https://www.cnblogs.com/zhengyihan1216/p/6260667.html Linux--用SecureCRT来上传和下载文件 SecureCRT下的文件传输协议 ...

  3. [LeetCode&Python] Problem 693. Binary Number with Alternating Bits

    Given a positive integer, check whether it has alternating bits: namely, if two adjacent bits will a ...

  4. [LeetCode&Python] Problem 617. Merge Two Binary Trees

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  5. Executor 框架详解

    框架最核心的类是ThreadPoolExecutor,它是Java线程池的实现类,通过Executors工具类,可以创建3种类型的ThreadPoolExecutor: 首先附上ThreadPoolE ...

  6. MySQL--常见ALTER TABLE 操作

    ##================================## ## 修改表的存储引擎 ## SHOW TABLE STATUS LIKE 'TB_001' \G; ALTER TABLE ...

  7. adnanh webhook 框架 hook 定义

    Hook hook 是一个SON对象.钩子对象必须包含id和execute-command属性.所有其他属性都被视为可选. 属性 id - 指定hook的ID.方式格式(http://server:p ...

  8. adnanh webhook 框架execute-command 以及参数传递处理

      adnanh webhook是一个很不错的webhook 实现,方便灵活. adnanh webhook 支持以下功能: 接收请求 解析header 以及负载以及查询变量 规则检查 执行命令 下面 ...

  9. javabean(实体类)转Map类型

    javabean(实体类)转Map类型 从网上"風亦飞"的导出EXCEL的源代码提取出来的.认为非常好用.分享一下给大家,主要看beanToMap方法就OK了 /*以下是从poi导 ...

  10. TensorFlow笔记-05-反向传播,搭建神经网络的八股

    TensorFlow笔记-05-反向传播,搭建神经网络的八股 反向传播 反向传播: 训练模型参数,在所有参数上用梯度下降,使用神经网络模型在训练数据上的损失函数最小 损失函数:(loss) 计算得到的 ...