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. 【M6】区别increment/decrement操作符的前置（prefix）和后置（postfix）形式

    1.考虑++(--的情况是一样的),前置是累加然后取出,后置是取出然后累加. 2.重载方法根据形参表的不同区分,问题来了,前置和后置形式都没有形参,因此没法区分.怎么办? 对于后置增加一个形参int, ...

  2. C++为什么不支持某些东西

    1.学习C++的过程,经常发现C++不支持一些东西,思考下,为什么? 2.C++不支持一些东西,有两个原因: a.可以做到,但是会导致一些不合理的结果,这些结果往往与程序员的期望不一致. b.属于“臣 ...

  3. 【PAT Advanced Level】1008. Elevator (20)

    没什么难的,简单模拟题 #include <iostream> using namespace std; int main() { int num; cin>>num; int ...

  4. [AngularJS] Lazy Loading modules with ui-router and ocLazyLoad

    We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want ...

  5. 解决easyui-datagrid在ie中无法reload问题

    easyui在页面载入时,会自己主动填充datagrid中的数据,当加入.改动.删除后,会触发reload事件,对datagrid进行又一次载入. 这个过程在FireFox中没有问题,用firebug ...

  6. StarlingMVC简介，原理解说及示例源码

    StarlingMVC简介 StarlingMVC是一个为使用Starling来开发游戏的MVC框架.这个框架的特性方面,很像Swiz和RobotLegs,原理亦像Mate.其特性列表如下: 依赖注入 ...

  7. INNOBACKUPEX热备MYSQL数据

    http://www.databaseclub.com/2014/11/innobackupex/ 1)对MySQL进行全备份1.备份数据   1 innobackupex --user=userna ...

  8. python(7)–类的多态实现

    第一步: 先定义三个类: class Animal: def __init__(self, name): self.name = name #这个方法的意思是,如果继承该类,就得自己写talk方法,如 ...

  9. jsp无法支持el标签及jstl标签

    在jsp页面头部添加如下 <%@ page isELIgnored="false"%> <%@ taglib uri="http://java.sun. ...

  10. 虚拟机中Ubuntu设置固定IP方法

    --2013年7月29日20:39:16 场景:在搭建hadoop分布式系统的时候,每次重启节点,节点对应的ip发生变化,现在需要将每个节点绑固定的ip --原理: 设置节点用的网卡->绑定ip ...