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. POJ 3743 LL’s cake（圆+PSLG）

    题意是给你一块在原点半径为10的圆,然后告诉你一条直线在圆弧上的极角,相当于用这条直线把这个圆分成两半,然后一共是n条直线切圆,就好比切蛋糕,问你其中最大一块的面积是多少. 如果我们将圆弧转化成直线边 ...

  2. Scrapy 教程(四)-命令

    scrapy 没有界面,需要命令行来操作. 非常简单,总共也就十四五个命令,分为全局命令和项目命令. 全局命令 在哪都能用 常用命令 scrapy startproject name 创建项目/工程 ...

  3. 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

    ****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...

  4. (ES6)数据处理常用工具方法收集(更新状态: on)

    1. 扁平数组转成tree结构(来源: StackOverflow的印度老哥写的) // Data Set // One top level comment var comments = [{ id: ...

  5. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  6. ElasticSearch - 解决ES的深分页问题 (游标 scroll)

    https://www.jianshu.com/p/f4d322415d29 1.简介 ES为了避免深分页,不允许使用分页(from&size)查询10000条以后的数据,因此如果要查询第10 ...

  7. MongoDB入门_MongoDB特色

    1. sql数据库与nosql数据库对比 nosql不支持实时一致性转而支持数据的最终一致性,数据有一定的延迟 redis数据库支持部分事物,而mongodb不支持事物 nosql数据库没有多表联查功 ...

  8. Codeforces Round #430 (Div. 2) - B

    题目链接:http://codeforces.com/contest/842/problem/B 题意:给定一个圆心在原点(0,0)半径为r的大圆和一个圆内的圆环长度d,然后给你n个小圆,问你有多少个 ...

  9. C#基础知识之VS的快捷键汇总

    VS中默认的常用快捷键.可以根据自己的习惯,自己设置快捷方式,工具->选项->环境->键盘. 编辑相关的键盘快捷键 Ctrl + K,Ctrl + C = 注释选定行 Ctrl + ...

  10. DDD领域驱动设计初探（六）：领域服务

    前言:之前一直在搭建项目架构的代码,有点偏离我们的主题(DDD)了,这篇我们继续来聊聊DDD里面另一个比较重要的知识点:领域服务.关于领域服务的使用,书中也介绍得比较晦涩,在此就根据博主自己的理解谈谈 ...