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. delphi 立即显示提示

    procedure TForm1.FormCreate(Sender: TObject); begin  Application.HintPause:=0;//立即显示  Application.hi ...

  2. Delphi2010下的FillChar

    在delphi2010中,因为unicode的原因,FillChar使用方法已经和老版delphi大不相同了. 如果想用某一个字符(或汉字)填充内存 buf: array[0..1023] of Ch ...

  3. Android 滑动效果高级篇（八）—— 自定义控件

    自定义控件,较常用View.ViewGroup.Scroller三个类,其继承关系如下: 本示例自定义控件,实现一个Gallery效果,并添加了一个显示View个数和位置的bar条,效果图: 自定义控 ...

  4. SAP SOAMANAGER 配置WEBSERVICE 提示：Service cannot be reached解决方法

    TM中有些服务没有被激活,以UI界面个性化设置化设置为例: 如果服务没有被激活,打开界面就会显示: 这时候右键点击属性,获取服务ID: 通过事务代码SICF,输入服务ID:wd_analyze_con ...

  5. c#线程--生产者和消费者

    using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...

  6. PAT 1018

    1018. Public Bike Management (30) There is a public bike service in Hangzhou City which provides gre ...

  7. php中常用设置

    设置SESSION的生命周期 今天我所要想解决的问题,简单来说,就是设置SESSION的生命周期问题,其实问题是很简单了,只是不知道为什么,我用session_cache_expire(12*60); ...

  8. HDU--杭电--1195--Open the Lock--深搜

    Open the Lock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  9. 20+ Rsync command’s switches and common usages with examples – Unix/Linux--reference

    reference:http://crybit.com/rsync-commands-switches/ The “rsync” is a powerful command under the Lin ...

  10. 自问自答-hadoop自带哪些案例（0.20.2）

    1)aggregatewordcount 计算输入文件中文字个数的基于聚合的MapReduce程序 2)aggregatewordhist 生成输入文件中文字个数的统计图的基于聚合的MapReduce ...