前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input。在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了。

把我给苦恼的不行。

问题:头部固定定位后,当input获得焦点时,头部导航会向右闪动一下出现这么个情况。

后来终于找到了解决的办法。就是一个属性在作怪:input{outline:none}加上这个就ok了。

outline 属性在一个声明中设置所有轮廓属性。input上加上outline与去掉outline属性,input会有一个明显的不同。

这说明自己的知识还是十分的浅薄,要好好的加强自身的修炼了。

手机页面关于头部固定定位与input出现的问题的更多相关文章

  1. 手机页面中的meta标签

    以前看书的时候,觉得meta标签就只有一个charset对于我来说是有用的.前段时间有个学弟让我写个手机版的网页,我才知道原来meta标签有那么多学问. meta指元素可提供有关页面的元信息(meta ...

  2. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  3. Android StickHeaderRecyclerView - 让recyclerview头部固定

    介绍在项目中有时会需要recyclerview滑动式时某个view滑出后会固定在头部显示,比较常用的比如手机联系人界面.地区选择界面等. StickHeaderRecyclerView就是实现这个功能 ...

  4. 安卓手机 HTML5 手机页面 输入表单被键盘遮挡住了

    TML5 手机页面 输入表单被键盘遮挡住了 请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了? 有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的 ...

  5. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  6. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  7. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

  8. 使用fiddler4做代理调试手机页面

    由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就 ...

  9. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

随机推荐

  1. 【索引】gtest学习笔记

    下载gtest 链接:http://www.cnblogs.com/duxiuxing/p/4270804.html gtest官方文档浅析 链接:http://www.cnblogs.com/dux ...

  2. 乱译文档--开始使用Musca

    原文地址:http://aerosuidae.net/musca_start.html aerosuidae.net Musca - Start Using startx Launch it from ...

  3. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  4. maven,本地仓库和私服nexus的配置,以及eclipse载入maven

    首先可以进入http://maven.apache.org/官网查看如何配置 一.配置环境 1 确定自己的java运行环境配置正确-->在cmd运行 java -version或echo %JA ...

  5. Oracle 数据库基本操作——表操作:查询

    目录: 1.基本查询 2.多表查询 3.多行查询 4.集合查询 2.连接 3.嵌套查询 1.基本查询 语法: select column|others{,columnName|others} from ...

  6. IOS实现小型计算器

    作为一名初学者,编辑一款能够在IOS操作系统上运行的计算器是一件很值得自豪的事情,网络上虽然后很多相关的文章和代码,功能也很强大但是我感觉相关的计算器比加复杂,晦涩难懂,所以我想通过这个小小的计算器, ...

  7. C primer plus 读书笔记第五章

    本章的标题是运算符,表达式和语句.主要研究如何处理数据. 示例代码展示了一个使用简单的while循环的代码,难度不大. 下面简单介绍本章的基本概念. 1.基本运算符. 基本运算符有:赋值运算符(C语言 ...

  8. UIKit和Core Graphics绘图(一)——字符串,线条,矩形,渐变

    概述 CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统,频繁的用于绘制自定义视图.Core Graphics是高度集成于UIView和其他UIKit部分的.Core Gr ...

  9. Java基础知识强化96:Calendar类之获取任意年份的2月有多少天的案例

    1. 分析: (1)键盘录入任意的年份 (2)设置日历对象的年月日            年:就是(1)输入的数据            月:是2(3月份)            日:是1  (3)把 ...

  10. Nginx 反向代理配置实例(转)

    user www www; worker_processes ; error_log logs/error.log notice; pid logs/nginx.pid; worker_rlimit_ ...