zoukankan      html  css  js  c++  java
  • 移动端border-radius的几个BUG

    个人博客:

    http://mcchen.club


     

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

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

    .foo {
         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。

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

    3.1 Android 4.2.x 背景色溢出

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

    border-radius bug

    关于背景剪裁background-clip
    background-clip: border-box|padding-box|content-box;
    描述测试
    border-box 背景被裁剪到边框盒。 测试
    padding-box 背景被裁剪到内边距框。 测试
    content-box 背景被裁剪到内容框。 测试

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

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

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

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

    完整代码应该是这样的:

    .foo {
     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;
    }

    3.3用box-shadow模拟边框
    背景色溢出另一个解决办法就是使用box-shadow模拟border;差不多可以达到效果
    比如将

    border: 1px solid #333333;

    替换为

    box-shadow: 0 0 1px 1px #333333;

    四、其他问题

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

  • 相关阅读:
    PHP 使用 GET 传递数组变量
    Java实现 蓝桥杯 算法训练 数据交换
    Java实现 蓝桥杯 算法训练 数据交换
    Java实现 蓝桥杯 算法训练 数据交换
    Java实现 蓝桥杯 算法训练 景点游览
    Java实现 蓝桥杯 算法训练 景点游览
    Java实现 蓝桥杯 算法训练 景点游览
    Java实现 蓝桥杯 算法训练 二进制数数
    Java实现 蓝桥杯 算法训练 二进制数数
    Java实现 蓝桥杯 算法训练 二进制数数
  • 原文地址:https://www.cnblogs.com/McChen/p/4414627.html
Copyright © 2011-2022 走看看