移动前端的一些坑和解决方法(外观表现)

问题描述 环境与频率 解决方法
border-radius百分比失效 Android2.3.x 设置一个较大值如border-radius:9999px
placeholder属性设置的文字向上偏移的厉害 Android4.x部分机型 line-height:normal
iOS5及以后版本都支持. iOS4及以下版本不支持,会当做static处理.
  1. Android 2.1 及以下版本不支持.
  2. Android 2.2 滚动过程中不保持fixed的位置,滚动完成后回到fixed的位置.
  3. Android 2.3 支持fixed, 但是要求页面禁止缩放.
  4. Android 3+ 支持fixed.
 
如果一个应用了css3 transform的元素里面包含fixed定位的元素,在webkit核心的浏览器下,该fixed定位的元素会失效,其实际定位效果类似绝对定位,会跟着滚动条的滚动而滚动! ios 避免在应用了css3 transform的元素内部嵌套fixed定位的元素。
webkit上的input,button,及select的默认样式可以通过以下代码禁用,然后自定义。   -webkit-appearance:none;
video标签的父元素(祖辈元素)设置transform样式后,标签会脱离文档流 部分android机型 避免使用transform,如果需要设置位移,可使用绝对定位加top/left代替
body设置100%高度后,在移动浏览器里面可能会被底部的导航栏挡住: 各移动浏览器经常出现 document.documentElement.style.height = window.innerHeight + ‘px‘

使用border-image属性实现物理1px

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("data:image/png;base64,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") 2 0 stretch;
}

  

时间: 2024-10-29 19:08:37

移动前端的一些坑和解决方法(外观表现)的相关文章

记一次SpringBoot 开发中所遇到的坑和解决方法

记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型包空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Integer便为null,这时候将Interger自动转型为int,则会出现空指针异常 这个时候,我们可以在Service层对Integer的数据进行判断,如果为空,就把它复制为0 // 在pojo中,如果Integer canJoinNun为null 就把值设置为0 if (publishMsg.getC

android下前端开发诡异bug记录&解决方法

1.border-radius有bug,围不住background 描述:设置了border-radius后,背景色依然会从圆角里冒出来 解决方法:在设置了border-radius的容器加上background-clip:padding-box;一定要把background样式提到background-clip样式前!!(被这个bug坑死了,花了大半天时间在近乎绝望的情况下找出了原因) 不断补充中…

ubuntu16.04安装CUDA 8.0(很详尽,包括一些坑的解决方法)

每次配置环境都头疼得要死,总是会遇到各种各样的问题,这次决心一劳永逸地解决这个问题,踩最多的坑,装最稳的环境. 先介绍用于测试的电脑:操作系统是在清华镜像上下载的ubuntu16.04LTS,内核版本是4.15.0-29-generic,电脑是联想Y430P,显卡我没记错的话是GTX850M. 本篇绝大部分操作需要管理员权限,即sudo,也许不把cuda安装到/usr/lib而是自己的home目录下可以不用sudo权限,但我没有尝试,有兴趣的可以自己尝试一下. 一.更换内核 CUDA8.0最高仅

Android开发过程中的坑及解决方法收录(六)

1. file.listFiles 空指针异常 最近在弄个小项目,类似一个文件管理器,需要获得手机存储里的目录之后显示,但是运行过程中出现错误,搜索了资料,得出了以下的解决办法 问题产生的原因: android6.0以上需要动态申请权限,确保自己有读取和写入SD卡的权限 以往版本的话,写入SD卡的权限其实是包含了读取SD卡的权限,但是android6.0有所改变,所以得声明读取和写入SD卡的权限,两个权限 存在有隐藏文件,在获取列表的时候出现空指针问题 解决方法: 针对第三个问题,我们只需要添加

Android开发过程中的坑及解决方法收录(7)

1.无法找到自定义View的实例对象 问题描述: 由于经常要使用到两个TextView的布局,所以,我打算将其封装成一个自定义View,封装成功,界面能够成功显示了,但是,想给它设置点击监听器的时候就报错了,错误显示此View的实例为null 解决方法: 经过Android交流群的群友的热心帮忙,终于是找到了原因,因为我重写了两个参数的构造方法,但是调用父类的构造方法的时候却是调用了父类中的单个参数构造方法,调用父类两个参数的构造方法即可解决问题 原文地址:https://www.cnblogs

angular2中使用iframe及前端路由踩坑未解决

前次做到英雄的路由部分,有个url的问题,这次我按照教程里面的vs2015集成方式发现styleUrls: ['./app/app.component.css']这次找不到了,要重新换成styleUrls: ['app.component.css']....你在逗我?可能是因为'my-app'的文件位置变了吧. 这个不管,这次主要写iframe的问题. vs里面建立了这样一个首页 <div> <div> @Html.Partial("_LeftLayOut")

前端控制台返回406错误解决方法

问题描述: 406 Not Acceptable,message:description The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers ()错误.(说是指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定

long型长整数字在前端页面显示异常及其解决方法

文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子 在做项目中,发现了一个诡异的事情,后台的long型数字不能正确地在前端页面显示.经过我的反复排查问题,总算是找到了问题原因所在,希望能帮助到大家,让大家少走弯路. 2.解决问题 (1)初试EL表达式取long型数值 后台java代码设置属性 1 BlogDetail currentBlog = pageModel.ge

使用Python过程中遇到的一些坑及其解决方法(持续更新)

1.列表不能直接赋值 nums1 = nums2 x nums1[:] = nums2 正确 2.返回列表某一元素的值可以使用index函数 aList = [123, 'xyz', 'runoob', 'abc'] print "xyz 索引位置: ", aList.index( 'xyz' ) print "runoob 索引位置 : ", aList.index( 'runoob', 1, 3 ) 参数 x-- 查找的对象. start-- 可选,查找的起始位