使用appframework前端框架中输入框圆角问题
目前使用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前端框架中输入框圆角问题的更多相关文章
- 前端框架中 “类mixin” 模式的思考
"类 mixin" 指的是 Vue 中的 mixin,Regular 中的 implement 使用 Mixin 的目的 首先我们需要知道为什么会有 mixin 的存在? 为了扩展 ...
- day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架
目录 1.移动端开发相关概念 1.APP类型 2.移动端屏幕介绍 3.移动端自适配方案 4.元信息(meta) 2.APP开发准备 1.注册APPCLoud账号 2.下载APP开发编辑器 3.下载AP ...
- 前端框架对于未来web移动端的影响
现在前端框架市场比较乱,各种各样的框架参差不齐,这给我带来了很多困惑,同样是很多朋友的困惑吧!因为前端框架有很多种,对于程序员来说选择学习是非常困难的,不可能有几十上百种都要学习吧,不过最好的办法就是 ...
- 2017年 JavaScript 框架回顾 -- 前端框架
概述: 对于 JavaScript 社区来说,npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架.npm 强大的搜索功能能够帮助找到一组相关的软件包,同时其内置的的 ...
- 极致简洁的微前端框架-京东MicroApp开源了
前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...
- 基于 iframe 的微前端框架 —— 擎天
vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代 ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- 找到MVC框架中前端URL与后端同步的解决方案
基本思路: 先用URL标签生成完整的URL字符,前端动态参数的部分以适配符先填充,最后动态参数利用正则匹配进行替换. 这种方式,可以在各种MVC框架中适用,妙. 不废话,上码. var url = & ...
- Yii框架学习笔记(二)将html前端模板整合到框架中
选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...
随机推荐
- 汕头市队赛SRM 20 T2不净的圣杯
不净的圣杯 SRM 20 背景 作为一张BUG级别的卡,官方打算把它修改得人畜无害一些…… 虽然名字还没想好,但是能力大概是对敌方所有单位造成d点伤害,d为自己牌组中所有卡的编号的最大公约数.这无疑是 ...
- web-project 故障修复功能 传递所有的event_id数据到后台
<script language=javascript> function IdentifyRepair(event_id) { var url; url = "/View/fa ...
- perl6中的hash定义(2)
use v6; , :b, :!c; say %ha; say %ha<a>; #这里不能用%ha{a}, {a}表示调用a()函数了, 在perl6中, {}有特别函义 say %ha{ ...
- kimbits_USACO
StringsobitsKim Schrijvers Consider an ordered set S of strings of N (1 <= N <= 31) bits. Bits ...
- 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 = < ...
- tomcat组成介绍和调优方案
1.tomcat组成介绍 1.1 目录组成介绍 1.2 启动tomcat中遇到的问题 a.启动过程中出现很多异常:因为端口被占用了 解决方式1:修改Tomcat\conf\server.xml中的默认 ...
- laravel 中的入口文件报错
1.此次是由于加载的配置文件的编码错误导致的.例:conf.php
- leetcode 之Remove Nth Node From End of List(19)
这题比较简单,方法有很多.其中一种比较有意思的做法是设置两个指针,一个先走n步,然后再一起走.一个到了末尾,另一个也就确定了要删除元素的位置. ListNode *removeNthFromEnd(L ...
- SecureCrt的操持连接办法
保持连接: options -> global options -> General -> Default Session,点击Edit default settings按钮,在Te ...
- bootstrap3中container与container_fluid容器的区别
声明:转自 CSDN博客 .container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并 ...