目前使用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. 汕头市队赛SRM 20 T2不净的圣杯

    不净的圣杯 SRM 20 背景 作为一张BUG级别的卡,官方打算把它修改得人畜无害一些…… 虽然名字还没想好,但是能力大概是对敌方所有单位造成d点伤害,d为自己牌组中所有卡的编号的最大公约数.这无疑是 ...

  2. web-project 故障修复功能 传递所有的event_id数据到后台

    <script language=javascript> function IdentifyRepair(event_id) { var url; url = "/View/fa ...

  3. perl6中的hash定义(2)

    use v6; , :b, :!c; say %ha; say %ha<a>; #这里不能用%ha{a}, {a}表示调用a()函数了, 在perl6中, {}有特别函义 say %ha{ ...

  4. kimbits_USACO

    StringsobitsKim Schrijvers Consider an ordered set S of strings of N (1 <= N <= 31) bits. Bits ...

  5. Qualcomm platform, the commonly used parameters of charger and battery in device tree file

    Platform MSM8917 PM8937 PMI8940 Parameters 1 battery charging voltage : qcom,float-voltage-mv = < ...

  6. tomcat组成介绍和调优方案

    1.tomcat组成介绍 1.1 目录组成介绍 1.2 启动tomcat中遇到的问题 a.启动过程中出现很多异常:因为端口被占用了 解决方式1:修改Tomcat\conf\server.xml中的默认 ...

  7. laravel 中的入口文件报错

    1.此次是由于加载的配置文件的编码错误导致的.例:conf.php

  8. leetcode 之Remove Nth Node From End of List(19)

    这题比较简单,方法有很多.其中一种比较有意思的做法是设置两个指针,一个先走n步,然后再一起走.一个到了末尾,另一个也就确定了要删除元素的位置. ListNode *removeNthFromEnd(L ...

  9. SecureCrt的操持连接办法

    保持连接: options -> global options -> General -> Default Session,点击Edit default settings按钮,在Te ...

  10. bootstrap3中container与container_fluid容器的区别

    声明:转自 CSDN博客 .container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并 ...