HTML代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>last-child</title>

    <style>

        body{

            color:#333;

        }

        li.test-last-child:after{

            display: block;

            content: '';

            height: 10px;

            background-color: #0000ed;

            transform:scaleY(0.3);

        }

        li.test-last-child:last-child:after{

            display: none;

        }

    </style>

</head>

<body>

<ul>

    <li class="test-last-child">321312</li>

    <li class="test-last-child">31313</li>

    <li class="test-last-child">3131</li>

    <li class="test-last-child">1413</li>

    <li class="test-last-child">141321</li>

    <li class="test-last-child">1421</li>

</ul>

</body>

</html>

伪元素after的高度为10px时chrome效果图

　　

伪元素after的高度为10px时Firefox效果图

伪元素after的高度为1px时chrome效果图

伪元素after的高度为1px时Firefox的效果图

1、伪元素的高度大于1px时scale可以正常渲染，当高度为1时，scale小于1时火狐浏览器不能很好的渲染出来。

2、实际上，当伪元素的高度为1px时，scale在谷歌浏览器虽然能正确显示出来，但是渲染的过程中只是改变了颜色的透明度，并没有改变高度的大小。

如下图所示：渲染前

渲染后

而此时，火狐浏览器压根是不渲染的（因为为元素的高度小于1且scale也小于1），所以scale的方式解决小于1px时会存在兼容问题

此时，最好的解决办法是

当设计稿的像素小于1px时，代码渲染直接是1px，然后给border-color或者background-color的色值设置为rgba形式

如下图，兼容谷歌和火狐

谷歌

火狐

css笔记--web端小于1px设计的处理方法的更多相关文章

  1. css笔记——移动端

    苹果手机 /*按钮样式:*/input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -w ...

  2. c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件

    废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...

  3. CSS3实现小于1px的边框(移动端)

    <!doctype html> <html lang="en"> <head> <meta content="width=dev ...

  4. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  5. CSS如何作小于1PX的边

    小于1PX的边能使页面变得更加精致,那么具体怎么做呢? 主要思路就是设置伪元素先放大再通过变换缩小. 代码如下 .border { position: relative;//如果有圆角 } .bord ...

  6. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  7. 第132天：移动web端-rem布局（进阶）

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  8. web端通信技术

    1.web端通信技术:长连接.长轮询.websocket; 什么是长连接.长轮询? 就是客户端不停的向服务器发送请求以获取最新的数据信息.这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它 ...

  9. 创建您的 ActiveReports Web端在线报表设计器

    概述 ActiveReports Web端在线报表设计器已经正式上线!看到它这么帅气.实用,你是不是也想自己动手创建一个? 现在我们就来教您,如何创建一个简单的 ActiveReports Web端在 ...

随机推荐

  1. IDHttp的基本用法（转）

    一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等 IDHttp的创建,需要引入ID ...

  2. 让table 居于页面的正中间（上下左右均居中的方法）

    ? <table bgcolor="#jnkc" width="300" height="200" style="posit ...

  3. OpenGL 3：画圆

    这次使用OpenGL画圆,而且中间画一个实心的五角星. 1. 画实心五角: 由于之前使用Polygen画会出现故障,或许是各个GPU硬件也会不一样的,所以使用Polygen画实心五角星并不可靠: 所以 ...

  4. Android监听SD卡文件变化

    今天再一次使用到FileObserver,上一次使用还是很久之前了.总结一下FileObserver里留的一些“坑”   1.FileObserver只能监听一个目录下的“一级”子文件,也就是说Fil ...

  5. Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

    在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...

  6. string2array($value);

    /*** 将字符串转换为数组** @param string $data 字符串* @return array 返回数组格式,如果,data为空,则返回空数组*/if ( !function_exis ...

  7. df 和 du 命令详解

    df命令详细用法 a:显示全部的档案系统和各分割区的磁盘使用情形 i:显示i -nodes的使用量 k:大小用k来表示 (默认值) t:显示某一个档案系统的所有分割区磁盘使用量 x:显示不是某一个档案 ...

  8. SQL 生成一个日期范围

    有时想按日或月生成一个序列,就像2014-1-1.2014-1-2.2014-1-3... 在sql server中可以写个函数来实现. /* 生成一个日期范围,如2014.01.2014.02... ...

  9. TextFiled 中输入金额

    要求: 输入的金额不能超过六位, 小数点后面只能输入两位小数 如果 textFIled  中第一位输入的是0 ,后面必须输入小数点,否则禁止输入 用到 textfiled代理方法 #pragma ma ...

  10. MySQL多实例配置

    实验环境:RHEL6.4为最小化安装,mysql安装包为通用二进制安装包,版本为mysql-5.6.26 创建mysql用户 #useradd –M –s /sbin/nologin mysql #y ...