1、场景一：

IE6 下默认div最小高度为2px，如何创建高为1px的容器？

.minContainer{font-size:0px;overflow:hidden}
 

2、场景二：

移动端高分辨率下，将1px border 渲染成2px

解决方案（1）
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/>

然后通过rem进行布局
解决方案（2）
利用伪元素scale, 模拟边框：

eg:

<!DOCTYPE html>

 <html>

  <head>

   <meta charset="UTF-8">

   <title>解决1px边框问题</title>

   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

      <style>

      .line {position:relative;}

      .line:after {width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}

      .list {width:100%;margin:auto;list-style:none;padding:0;}

      .list:after {border:1px solid #ccc;border-radius:10px;}

      .item {padding:10px;}

      .item:after {border-bottom:1px solid #ccc;}

      .item:last-child:after {display:none;}

     </style>

  </head>

<body>

<ul class="list line">

  <li class="item line">item001<br/>sdfdsfsdfds</li>

  <li class="item line">item002</li>

  <li class="item line">item003</li>

  <li class="item line">item004</li>

  <li class="item line">item005</li>

  <li class="item line">item006</li>

  <li class="item line">item007</li>

  <li class="item line">item008</li>

  <li class="item line">item009</li>

  <li class="item line">item010</li>

</ul>

</body>

</html>
解决方案（3）
.shadow{box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);}

box-shadow andriod会出现一些异常显示
解决方案（4）
渐变

.border{position:relative;top:40px;height:1px;background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x; background-size: 100% 1px; margin-top:20px}
解决方案（5）
 ios7以上版本支持0.5px,可通过js判断是否支持0.5px做降级处理

 if (window.devicePixelRatio && devicePixelRatio >= 2) {

    var testElem = document.createElement('div');

    testElem.style.border = '.5px solid transparent';

    document.body.appendChild(testElem);

  if (testElem.offsetHeight == 1)

  {

    document.querySelector('html').classList.add('hairlines');

  }

  document.body.removeChild(testElem);

}
解决方案（6）

background-image linear-gradient

.border {

         background-image:linear-gradient(180deg, red, red 50%, transparent 50%),

         linear-gradient(270deg, red, red 50%, transparent 50%),

         linear-gradient(0deg, red, red 50%, transparent 50%),

         linear-gradient(90deg, red, red 50%, transparent 50%);

         background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;

         background-repeat: no-repeat;

         background-position: top, right top,  bottom, left top;

         padding: 10px;

     }
解决方案（7）

border-image

.border3 {

          border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;

          border-width: 0px 0px 1px;

      }

iphone6 plus渲染成3px 通过@media 进行相应设置

1px渲染成2px的场景及解决方案的更多相关文章

  1. PHP如何自动识别第三方Restful API的内容，自动渲染成 json、xml、html、serialize、csv、php等数据

    如题,PHP如何自动识别第三方Restful API的内容,自动渲染成 json.xml.html.serialize.csv.php等数据? 其实这也不难,因为Rest API也是基于http协议的 ...

  2. kafka系列八、kafka消息重复和丢失的场景及解决方案分析

    消息重复和丢失是kafka中很常见的问题,主要发生在以下三个阶段: 生产者阶段 broke阶段 消费者阶段 一.生产者阶段重复场景 1.根本原因 生产发送的消息没有收到正确的broke响应,导致pro ...

  3. Flask从入门到精通之Flask表单渲染成HTML

    表单字段是可调用的,在模板中调用后会渲染成HTML.假设视图函数把一个NameForm 实例通过参数form 传入模板,在模板中可以生成一个简单的表单,如下所示: <form method=&q ...

  4. 数据迁移的应用场景与解决方案Hamal

    本文来自网易云社区 作者:马进 跑男热播,作为兄弟团忠实粉丝,笔者也是一到周五就如打鸡血乐不思蜀. 看着银幕中一众演员搞怪搞笑的浮夸演技,也时常感慨,这样一部看似简单真情流露的真人秀,必然饱含了许许多 ...

  5. 移动端Retina屏boder 1px显示为2px或3px的解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比deviceP ...

  6. 移动端Retina屏边框线1px 显示为2px或3px问题解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比dev ...

  7. Oracle面对“数据倾斜列使用绑定变量”场景的解决方案

    1.背景知识介绍 2.构造测试用例 3.场景测试 4.总结 1.背景知识介绍     我们知道,Oracle在传统的OLTP(在线事务处理)类系统中,强烈推荐使用绑定变量,这样可以有效的减少硬解析从而 ...

  8. 就这？Spring 事务失效场景及解决方案

    小明:靓仔,我最近遇到了很邪门的事. 靓仔:哦?说来听听. 小明:上次看了你的文章<就这?一篇文章让你读懂 Spring 事务>,对事务有了详细的了解,但是在项目中还是遇到了问题,明明加了 ...

  9. 将你的 Virtual dom 渲染成 Canvas

    项目概述 一个基于Vue的virtual dom插件库,按照Vue render 函数的写法,直接将Vue生成的Vnode渲染到canvas中.支持常规的滚动操作和一些基础的元素事件绑定. githu ...

随机推荐

  1. iconv编码转换报错问题

    今天,再由ISO-8859编码格式转化为UTF-8格式过程中,出现报错:iconv: 未知 10304 处的非法输入序列. 问题分析:ISO-8859是英文格式的编码方式,不支持中文,为了解决中文支持 ...

  2. 如何增强Linux和Unix服务器系统安全性

    众所周知,网络安全是一个非常重要的课题,而 Linux 和 unix 又是一种服务器上运行最广告的操作系统,下面本文将就加强一些适当的配置来防止一些安全问题的发生,以增强Linux/Unix服务器系统 ...

  3. markdown编辑器学习

    markdown是一块文本编辑器,属于纯文本文件,可以使用任何编辑器打开.对于写作来说是一个好帮手,它的好处有很多,比如可以直接转成html,制作电子书等.今天开始学习一下这个神奇的编辑器.从今天起把 ...

  4. es5继承和es6类和继承

    es6新增关键字class,代表类,其实相当于代替了es5的构造函数 通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列 /* es5 创建一个person 构造函数 */ f ...

  5. 【Git】error: RPC failed; HTTP 413 curl 22 The requested URL returned error:413 Request Entity Too Large

    error: RPC failed; HTTP 413 curl 22 The requested URL returned error:413 Request Entity Too Large fa ...

  6. Linux硬盘分区和软硬链接

    磁盘分区:先在虚拟机设置里添加一个新硬盘 查看现在电脑上有几个硬盘:ls /dev/硬盘名 分区命令:fdisk  /dev/硬盘名 进入之后,可以输入 m 查看命令的具体是使用 新建分区:n→p(选 ...

  7. Listview使用

    ListView控件比前面几种控件要复杂一些,通过此控件,可将项目组成带有或不带有列标头的列,并显示伴随的图标和文本.ListView控件是由ColumnHeader和ListItem对象所组成的,其 ...

  8. 可持久化+Trie || BZOJ 3261最大异或和 || Luogu P4735 最大异或和

    题面:最大异或和 代码: #include<cstdio> #include<cstring> #include<iostream> using namespace ...

  9. 《SaltStack技术入门与实践》——执行结果处理

    执行结果处理 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 Return组件可以理解为SaltStack系统对执行Minion返回后的数据进行存储或 ...

  10. Ansible环境搭建

    Installation Guide(Ansible官网链接) Basics / What Will Be Installed What Version To Pick? Control Machin ...