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. PHP实现微博的同步发送(转)

    导读:在设计博客类站点时,有时会需要在发布文章时同步发布在微博上.本文阐述了实现该功能的基本方式. 准备工作   作为新浪微博的开发者,需要有身份验证: 个人身份认证的审核,一般一个工作日: 接着是提 ...

  2. CDHtmlDialog加壳HTML5页面跳转错误解决（原）

    HTML5+Native方式开发应用程序,遇到的一个问题:HTML5实现的阅读器在打开文档时,CDHtmldialog类的跳转函数报错,忽略错误程序可以正确执行. 错误代码:OnNavigateCom ...

  3. SQL SERVER 查询Job作业基本信息及执行情况

    查询作业基本信息和作业执行情况 SELECT [jop].[job_id] AS '作业唯一标识符' ,[jop].[ name ] AS '作业名称' ,[dp].[ name ] AS '作业创建 ...

  4. Programming Assignment 3: Collinear Points

    The problem. Given a set of N distinct points in the plane, draw every (maximal) line segment that c ...

  5. Getting started with Apache Camel--转载

    原文地址:http://www.javacodegeeks.com/2012/12/getting-started-with-apache-camel.html About Camel: Apache ...

  6. 5个可以帮你优化App的优秀网站

    也许现在有一款App可以提供所有你需要的,你不需要的,或者你可以想象到的内容.但是,有多少App真的可以不仅满足需求而且还能提供很好的用户体验呢? 相信很多APP并没有这样的能力.有一些APP的设计特 ...

  7. BootStrap2学习日记7---表格

    基本表 代码: <div class="container"> <h1 class="page-header">基本表</h1&g ...

  8. Android（java）学习笔记106-1：深入分析Java ClassLoader原理

    1. 前言: Android中的动态加载机制能更好的优化我们的应用,同时实现动态的更新,这就便于我们管理我们的应用,通过插件化来减轻我们的内存以及CPU消耗,在不发布新版本的情况下能更新某些模块. 当 ...

  9. ASP.NET MVC and jqGrid 学习笔记 2-如何从本地获得数据

    上回说到jqgrid的基本配置,同时演示了显示数据的一种方法——datatype: "local".这种方法是从本地获取的,确切地说是在前端页面的javascript里写的硬编码. ...

  10. js中replace的用法【转】

    1.replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp ...