常见问题总结与整理系列~

1. border一像素在手机上看着有点粗的问题:

原理是因为:1px在手机上是使用2dp进行渲染的。换成 border: 0.5像素?是不行的!

解决方法

把border给了元素的before或者after等伪类,然后让伪类利用css3的transform的scaleY(0.5)缩放0.5像素,这样,就能实现了。

ps:小程序里的button的border也是这种方法解决得。

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
button{
position:relative;
padding: 50px 100px;
background: #bdbdbd;
border-radius:5px;
cursor:pointer;
border: 1px solid #3612ff
}
button:before{
position: absolute;
top: -1px;
left: 0;
content: "";
width:100%;
height: 1px;
border-top: 1px solid #efff00;
-webkit-transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
transform: scaleY(0.5);
}
</style>
</head>
<body>
<button>测试</button>
</body>
</html>

示例代码

我把实例放大400%倍截图,方便看效果:

细节大图: 

从示例图中很简单的可以看出来,

scale后黄色border比一像素的蓝色border低了一半.我把scale去掉,并把top改成0,可以很明显的看出,没有scale的是哪张图吧!

 

2.文本溢出问题:

2017-10-29  12:15:32

单行文本溢出处理 的代码:

overflow:hidden;
white-wrap:nowrap;
text-overflow:ellipsis;

多行文本溢出处理 的代码:

display: -webkit-box !important;
overflow:hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;//4表示第四行溢出,换成2就是只显示两行,并且第二行显示溢出的三个点点

示例:

<div class="test-box">
<p class="text-overflow">撒哈空间的话费卡号放假哈哈嗲额废话很多啊就发货咯哈嗲花发卡技术的看法很卡就 系啊对方会卡换地方空间和对方啊可见度发挥啊好地方卡的水分就会i为u召开的回复客户嗲嗯付款在发u恶化覅额是南方啊看电视呢佛子u地方哈哈客服你看左上角的发挥啊额我发你开始计划房子都分啊额开发合作客户的高鞥卡该use个不能在空间的规划和啊客户覆盖俄式风格展开疾风还额u和发空格咯额</p>
</div>
.test-box{
width: 300px;
border: 1px solid #4488ff;
margin : 20px;
padding : 20px;
background: #f1f1f1;
font: 16px "微软雅黑";
}
.text-overflow{
display: -webkit-box!important;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}

以上示例效果图:

由图可以看出,
因为line-clamp设置为了4,那么就显示4行且在第四行末尾显示小点点。
同理:若将line-clamp换成2,那么就会只显示两行,点点也将跑到第二行的最后边:

-webkit-line-clamp: 2;

3.背景图不随分辨率自适应的问题:

2017-10-29  12:15:32

写法:

效果:

改正:

这样不管iphone几都OK了

4. inline-block元素使用vertical-align后,父元素高度被莫名撑开

我一般用这两个属性,实现两个元素并列水平居中对齐的效果,但是给两个元素分别设置如上后,会出现父元素高度莫名很高的情况,设置父元素font-size:0;就可以解决了

~完

CSS - 移动端 常见小bug整理与解决方法总结【更新中】的更多相关文章

  1. 布局的诡异bug合集+解决方法(更新中)

    1.元素内部子元素的margin的边界线基准点的问题 论如何生硬起名字!!我反正已经被自己总结的题目绕晕了... “演员”介绍: 外层父元素:蓝色边框: 内部子元素:绿色区域: 粉红色区域是元素内部绿 ...

  2. 移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  3. Nginx常见错误与问题之解决方法技术指南

      Nginx常见错误与问题之解决方法技术指南. 安装环境: 系统环境:redhat enterprise 6.5 64bit 1.Nginx 常见启动错误 有的时候初次安装nginx的时候会报这样的 ...

  4. 分享.net常见的内存泄露及解决方法

    分享.net常见的内存泄露及解决方法 关于内存泄漏的问题,之前也为大家介绍过,比如:<C++中内存泄漏的检测方法介绍>,是关于C++内存泄漏的.今天为大家介绍的是关于.NET内存泄漏的问题 ...

  5. web端常见兼容性问题整理

    一.html和css 各浏览器的默认内外边距不一致问题 最明显的是ul标签内外边距问题,ul标签在IE-7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距. 解决办法:*{marg ...

  6. 25条div+CSS编程提醒及小技巧整理

    1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...

  7. 细数IE6的一串串的恼人bug,附加解决方法!

    1. li在IE中底部3像素的BUG 解决方案:在<li>上加float:left:即可解决 2. IE6中奇数宽高的BUG. 解决方案:就是将外部相对定位的div宽度改成偶数.高度也是一 ...

  8. C++常见gcc编译链接错误解决方法

    除非明确说明,本文内容仅针对x86/x86_64的Linux开发环境,有朋友说baidu不到,开个贴记录一下(加粗字体是关键词): 用“-Wl,-Bstatic”指定链接静态库,使用“-Wl,-Bdy ...

  9. 常见的SQL错误和解决方法

    前言 今天你会看到每个人——从新手到专家——在使用SQL时犯的各种常见错误.你不能永远避免犯任何错误,但是熟悉广泛的错误将帮助你在尽可能短的时间内解决这些错误. 注:在我们的例子中我们使用的是Orac ...

随机推荐

  1. ZooKeeper系列之二:Zookeeper常用命令

    https://my.oschina.net/u/347386/blog/313037

  2. js 四级联动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  3. zabbix_agentd客户端安装与配置(Linux操作系统)

    标注:官网下载zabbix安装包(zabbix安装包里包含了zabbix_agentd客户端安装包,我们只选择zabbix_agentd客户端安装) zbbix官网下载地址:  http://www. ...

  4. .net framework 4.0上跑webapi 1.0

    public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web AP ...

  5. EF学习和使用综合

    一.(引)你必须知道的EF知识和经验 二.(引)EF学习和使用(七)EF性能优化篇 三.(引)采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延 ...

  6. 面试的角度诠释Java工程师(一)

    前言: 我相信每一个程序员都是为了生活而努力着的.很多人因为兴趣,从此踏上了这条‘烧脑大行动’的金桥:也有很多人因为梦想和执着,奋不顾身融入这个职业:还有很多人因为被现实逼得太无奈,不得不为自己.为家 ...

  7. Nginx初入

    商城项目做了一个多月了,想到必须用到负载均衡,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.bat,用于启动和关闭ngin ...

  8. Java读写配置文件——Properties类的简要使用笔记

    任何编程语言都有自己的读写配置文件的方法和格式,Java也不例外. 在Java编程语言中读写资源文件最重要的类是Properties,功能大致如下: 1. 读写Properties文件 2. 读写XM ...

  9. Redis集群版在Java中的应用

    1.配置redis集群 <?xml version="1.0" encoding="UTF-8"?> <redisCluster> &l ...

  10. mysql5.7系列修改root默认密码

    操作系统为centos7 64 1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2. ...