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. JS观察者设计模式：实现iframe之间快捷通信

    观察者设计模式又称订阅发布模式,在JS中我们习惯叫做广播模式,当多个对象监听一个通道时,只要发布者向该通道发布命令,订阅者都可以收到该命令,然后执行响应的逻辑.今天我们要实现的就是通过观察者设计模式, ...

  2. python 元组及操作

    # 元组是'不可变'的 list 使用小括号 创建后不允许修改 # 创建# t = ('a','b','c',1,2,3)# print(t)# print(type(t))# # 3# print( ...

  3. 【源码解读】cycleGAN（一）：网络

    源码地址:https://github.com/aitorzip/PyTorch-CycleGAN 如图所示,cycleGAN的网络结构包括两个生成器G(X->Y)和F(Y->X),两个判 ...

  4. HTML DOM中的comfirm()确认对话框

    前言 最近在开发中有一个需求大概就是说:表单点击提交按钮首先弹出确认对话框,然后点击确定请求接口,那么问题来了,我们如何确定点击的是确定还是取消呢? 定义和用法 定义 comfirm()确认对话框,用 ...

  5. C语言双向链表讲解

    一.双向链表的概念 双向链表基于单链表.单链表是单向的,有一个头结点,一个尾结点,要访问任何结点,都必须知道头结点,不能逆着进行.而双链表添加了一个指针域,通过两个指针域,分别指向结点的前结点和后结点 ...

  6. 简单的物流项目实战，WPF的MVVM设计模式(五)

    开始界面 <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowD ...

  7. 切入点表达式execution()

    用于描述方法 [掌握] 语法:execution(修饰符 返回值 包.类.方法名(参数) throws异常) 修饰符,一般省略 public                公共方法 *         ...

  8. mv - 移动 (改名) 文件

    摘要 mv [选项]... 源文件 目标文件 mv [选项]... 源文件... 目录 mv [选项]... --target-directory=DIRECTORY SOURCE... 描述 改“源 ...

  9. 解密Qt安装目录的结构

    http://c.biancheng.net/view/3866.html 了解 Qt 安装目录的结构虽然不是编程必须的,但是它能练就我们的内功,让我们对 Qt 的编程环境了如指掌.Windows 和 ...

  10. Jmeter--函数助手之随机函数_Random(随机函数)

    各函数调用方法如下:1)__Random( , , ),获取值的方式:${__Random( param1,param2 ,param3 )},param1为随机数的下限,param2为随机数的上限, ...