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. [BZOJ 3771] Triple(FFT+容斥原理+生成函数)

    [BZOJ 3771] Triple(FFT+生成函数) 题面 给出 n个物品,价值为别为\(w_i\)且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? 分析 这种计数问题容易想到生成 ...

  2. [BZOJ 2154]Crash的数字表格(莫比乌斯反演+数论分块)

    [BZOJ 2154]Crash的数字表格(莫比乌斯反演+数论分块) 题面 求 \[\sum_{i=1}^{n} \sum_{j=1}^{m} \mathrm{lcm}(i,j)\] 分析 \[\su ...

  3. tensorflow学习笔记七----------卷积神经网络

    卷积神经网络比神经网络稍微复杂一些,因为其多了一个卷积层(convolutional layer)和池化层(pooling layer). 使用mnist数据集,n个数据,每个数据的像素为28*28* ...

  4. Excel如何通过关键字模糊匹配查找全称

    打开excel,以其素材为例,通过关键字模糊匹配查找全称.   在公司名下输入公式:=LOOKUP(1,0/FIND(D2,A2:A5),A2:A5),按回车键确定即可.   FIND(D2,A2:A ...

  5. react 错误处理

    https://www.jianshu.com/p/61d09e488743 https://codepen.io/sgroff04/pen/dVbgJy/

  6. router4.0

    https://blog.csdn.net/sinat_17775997/article/details/69218382 React Router 4.0 实现路由守卫   https://www. ...

  7. Hive配置日志

    1. 重命名hive/conf文件夹下的hive-log4j 2. 修改hive.log.dir参数,如果不修改默认hive.log位于/tmp/{user}下面,一般来说使用在hive目录下自己创建 ...

  8. iOS APP 国际化

    pp Store 中很多流行的应用程序有多种语言版本.虽然这些应用程序可能因为很多因素而变得流行,但是具有多种本地化版本,肯定是其中一个因素.越多的人可以理解并使用您的应用程序,潜在的买家也就越多. ...

  9. 互联网技术笔试总通不过？leetcode刷对了么

    https://36kr.com/p/5084645 Leetcode,绕都绕不过去的程序员刷题神器 编者按:本文来自逆行求职(ID:nixingjihua). 对所有求职技术岗位的童鞋来说,有这么一 ...

  10. 长沙理工大学第十二届ACM大赛-重现赛 D 小M和天平 （01背包）

    链接:https://ac.nowcoder.com/acm/contest/1/D 来源:牛客网 小M和天平 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言 ...