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. Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” a...

    报错: 从错误信息来看,似乎需要通过管理员身份来接受许可协议,于是试着从这个角度google,终于在这里找到了解决方法: 1.打开终端,输入  sudo xcodebuild -license 2.终 ...

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

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

  3. luogu P5329 [SNOI2019]字符串

    传送门 显然要写一个排序,那只要考虑cmp函数怎么写就行了.第\(i\)个字符串和第 \(j\)个,首先前\(min(i,j)-1\)个字符是相同的,然后就是要比较后缀\(min(i,j)\)和\(m ...

  4. localStorage的使用和vuex的拆分

    问题1:在隐身模式.或者用户未启用的情况下,使用localStorage可能会导致浏览器直接报错,怎么办? 方法:使用try-catch包裹 代码示例: store.jsimport Vue from ...

  5. MySQL索引的分类、结构、使用场景

    MySQL索引分类 1.主键索引:设定为主键后数据库会自动建立索引,innodb为聚簇索引 语法: 随表一起建索引: CREATE TABLE customer (id INT(10) UNSIGNE ...

  6. Linux系统安装使用实录--传送门（持续更新）

    1.安装Linux系统 经过两种系统对比,发现ubuntu的资源依赖更方便更全,  centos安装时可以配置开发环境,默认有安装的jdk,这一点比Ubuntu方便一点. win10+centos  ...

  7. ubuntu下docker安装

    首先来一个官网安装教程链接:https://docs.docker.com/install/linux/docker-ce/ubuntu/ 目前docker主要有docker-CE 与 docker- ...

  8. tensorflow 中 inter_op 和 intra_op

    [root@localhost custom-resnet-v2]# cat runme.sh #python demo_slim.py -h #python demo_slim.py --cpu_n ...

  9. ubuntu下安装python3.6.5导入ssl模块失败

    1.问题 python安装完毕后,提示找不到ssl模块: [root@localhost ~]# python3 Python ( , ::) [GCC (Red Hat -)] on linux2 ...

  10. windows 10 安装openssh 0x800f0954 的一种解决方法

    安装与卸载参考:https://docs.microsoft.com/zh-cn/windows-server/administration/openssh/openssh_install_first ...