目前使用HTML5技术来开发手机跨平台app已经成为了曾经的web开发人员介入移动开发的一条捷径。与此对应也出现了很多新的技术来支撑这样的开发方式，例如国外的phonegap和国内的APPcan等。很多移动端的前端UI框架也层出不穷，其原理都是大同小异，无非都是提供了一些常用的UI组件及其使用demo和js/ajax的API等。其实相对于原生开发，HTML5技术虽然开发成本和周期较小，但是效率上还是有很大差别的。所以选择前端框架就非常重要，如果框架太过于重量级，那么在手机上的表现将是灾难（实际上加载很慢，卡顿现象较多）。例如之前的jQuerymobile，虽然Jquery大名鼎鼎，但是其移动端框架效率确实不敢恭维。我一般使用其重写版appframework(JQMobi)框架，这个框架很轻，一般应用表现还是可以的。

今天使用了它里面的一个input开发一个用户登录界面，发现它的圆角input输入框在真机上是存在bug的，打开其CSS一看，发现它的input样式是这样设置的

对于圆角显示效果是通过border-radius来实现的，这种方式在PC端是没有问题的，但是在安卓手机上，如果你整个页面设置了背景或者背景颜色，显示效果将是矩形框里面有个圆角border，解决这个问题的方法是

给这个样式添加background-clip:padding-box;属性，这样在真机上显示就没有问题了,如果设置了这个属性还有显示问题的话是因为这个background-clip属性发生了冲突，继承了父容器的一个css,只需要在其后面添加!important来提高其优先级即可。

使用appframework前端框架中输入框圆角问题的更多相关文章

  1. 前端框架中 “类mixin” 模式的思考

    "类 mixin" 指的是 Vue 中的 mixin,Regular 中的 implement 使用 Mixin 的目的 首先我们需要知道为什么会有 mixin 的存在? 为了扩展 ...

  2. day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架

    目录 1.移动端开发相关概念 1.APP类型 2.移动端屏幕介绍 3.移动端自适配方案 4.元信息(meta) 2.APP开发准备 1.注册APPCLoud账号 2.下载APP开发编辑器 3.下载AP ...

  3. 前端框架对于未来web移动端的影响

    现在前端框架市场比较乱,各种各样的框架参差不齐,这给我带来了很多困惑,同样是很多朋友的困惑吧!因为前端框架有很多种,对于程序员来说选择学习是非常困难的,不可能有几十上百种都要学习吧,不过最好的办法就是 ...

  4. 2017年 JavaScript 框架回顾 -- 前端框架

    概述: 对于 JavaScript 社区来说,npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架.npm 强大的搜索功能能够帮助找到一组相关的软件包,同时其内置的的 ...

  5. 极致简洁的微前端框架-京东MicroApp开源了

    前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...

  6. 基于 iframe 的微前端框架 —— 擎天

    vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代 ...

  7. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  8. 找到MVC框架中前端URL与后端同步的解决方案

    基本思路: 先用URL标签生成完整的URL字符,前端动态参数的部分以适配符先填充,最后动态参数利用正则匹配进行替换. 这种方式,可以在各种MVC框架中适用,妙. 不废话,上码. var url = & ...

  9. Yii框架学习笔记（二）将html前端模板整合到框架中

    选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...

随机推荐

  1. JDK工具学习

    javap: 可以对照源代码和字节码,从而了解很多编译器内部的工作. 查看class字节码:JDK有自带的工具包,使用javap命令打开.class文件就行 javap -c JAVAPTest

  2. 「6月雅礼集训 2017 Day5」学外语

    [题目大意] 给出$\{P_i\}$,求经过以下操作后能够得到的不同序列个数: 第一步,选择$i, j$,交换$P_i,P_j$:第二步,把所有$P_x=i$的$P_x$变为$j$,把所有$P_x=j ...

  3. 【BZOJ】1529 [POI2005]ska Piggy banks

    [算法](强连通分量)并查集 [题解] 1.用tarjan计算强连通分量并缩点,在新图中找入度为0的点的个数就是答案. 但是,会爆内存(题目内存限制64MB). 2.用并查集,最后从1到n统计fa[i ...

  4. idea如何搭建springmvc4

    1.推荐大牛博客 此操作我操作了三次过后终于成功了,奉献大牛博客连接:做的非常详细到位,望各位采纳,推荐置顶. https://www.cnblogs.com/chenlinghong/p/83395 ...

  5. 双关键字LIS

    首先对于双关键字的LIS有一个比较暴力的方法,就是线段树套平衡树,我们把双关键字的LIS抽象成二维坐标系中的点,这样我们对于当前转移的点i(x,y),需要找的就是在(xx,yy)xx<x,yy& ...

  6. hdu 2717 Catch That Cow(广搜bfs)

    题目链接:http://i.cnblogs.com/EditPosts.aspx?opt=1 Catch That Cow Time Limit: 5000/2000 MS (Java/Others) ...

  7. rabbitmq之核心构架和原理总结（四）

    前言 前面博文已经将安装配置和站点管理介绍了,现在开始正式学习rabbitmq的使用了: rabbitMQ的构架 rabbitmq作为消息队列,一条消息从发布到订阅消费的完整流程为: 消息 --> ...

  8. 嵌入式 uboot引导kernel，kernel引导fs【转】

    转自:http://www.cnblogs.com/lidabo/p/5383934.html#3639633 1.uboot引导kernel: u-boot中有个bootm命令,它可以引导内存中的应 ...

  9. git报错The authenticity of host 'github.com (13.229.188.59)' can't be established. RSA key fingerprint is。。。

    额,记录下,.ssh/rsa_pub的内容都加到githup.com配置来,为什么还是报这个错呢. 最后发现是个小白问题,如下图 只需要输入yes就ok.

  10. ES6 一种新的数据结构--Map跟Objct的区别

    var map1=new Map(); var keys={key:'val'}; map1.set(keys,'content'); ==> {Object {key: "val&q ...