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. Educational Codeforces Round 2 B. Queries about less or equal elements 水题

    B. Queries about less or equal elements Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforc ...

  2. 杭电 3177 Crixalis&#39;s Equipment

    http://acm.hdu.edu.cn/showproblem.php? pid=3177 Crixalis's Equipment Time Limit: 2000/1000 MS (Java/ ...

  3. [MEAN Stack] First API -- 4. Organize app structure

    The app structure: Front-end: app.js /** * Created by Answer1215 on 12/9/2014. */ 'use strict'; func ...

  4. 一入python深似海--dict(字典)的一种实现

    以下是python中字典的一种实现.用list数据结构实现字典.详细是这种:[[(key1,value1),(key2,value2),...],[],[],...] 内部每个hash地址是一个lis ...

  5. php实现网页标签补全方法(转)

    导读:PHP在生成静态文件的时候,有时候会因为一些混编问题让HTML标签不完整或混乱而导致页面混乱.作者分享下面这段小代码可以非常方便解决问题. 如果你的网页内容的html标签显示不全,有些表格标签不 ...

  6. SSO-Javascript模拟IE登录，不让IIS弹出登录窗口

    解决方案:         用JS模拟IE用户登录,再跳转到对应的系统.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  7. 信号之sleep函数

    #include <unistd.h> unsigned int sleep(unsigned int seconds); 返回值:0或未休眠够的秒数 此函数使调用进程被挂起,直到满足以下 ...

  8. 循环语句until和while

    一.until语句的基本格式 until 条件测试 do 语句块 done 只要条件测试语句未成功结束,则执行语句块.(如果一开始条件测试语句就成功退出,那么一次也不执行语句块.这里跟C语言中的do. ...

  9. Jordan Lecture Note-12: Kernel典型相关分析(Kernel Canonical Correlation Analysis, KCCA).

    Kernel典型相关分析 (一)KCCA 同样,我们可以引入Kernel函数,通过非线性的坐标变换达到之前CCA所寻求的目标.首先,假设映射$\Phi_X: x\rightarrow \Phi_X(x ...

  10. Logistic回归总结

    原文:http://blog.csdn.net/dongtingzhizi/article/details/15962797  Logistic回归总结 作者:洞庭之子 微博:洞庭之子-Bing (2 ...