http://vicbeta.com/code/2013/04/24/phone-over-width.html

手机web开发资料少,原创解决方案Mark。

手机页面遇到一个横竖屏切换时出现的问题。为满足不同分辨率下正常显示,页面的input元素宽度需要撑满整个父级元素,而父级元素则是占满整行的,由于input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素,代码如下:

  1. <inputtype="text"class="text_input w_100"name="phone"id="phone"/>
  1. .text_input {
  2. box-sizing: border-box;
  3. padding:.8em;
  4. border:1px solid #E2E2E3;
  5. background:#FFF;
  6. font: normal 16px/1'SimHei';
  7. border-radius:3px;
  8. outline: none;
  9. }
  10. .w_100 {
  11. width:100%;
  12. }

竖屏打开时页面显示正常

input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素的更多相关文章

  1. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  2. 关于IE处理margin和padding值超出父元素高度的问题

    两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让 ...

  3. KnockoutJS中父元素有click绑定引起checked绑定时失效

    KnockoutJS中的checked绑定如果父元素有click绑定,会出现状态点击没反应,实际KO的值已经变化的情况. 这种情况下应该在checked绑定的元素上除了阻止事件冒泡,另外还需要额外加上 ...

  4. input 设置 width:100% 和padding后宽度超出父节点

    input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...

  5. IE8下 input标签内padding失效

    在做网页兼容时 发现在ie8下的input内用padding失效 为了达到居中文字的效果 使用line-height可以解决问题

  6. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  7. input 元素 相对父元素错位

    <div class="recommend"> <i class="iconfont icon-user"></i> < ...

  8. 使用padding后内容超出父级元素

    解决方法:

  9. 定位之float 同一父元素的float相互影响,float是margin盒子在父元素的padding盒子内

随机推荐

  1. Altium Designer 覆铜时过孔连接形式的设置——只将过孔连接设置为Direct Connect

    Altium Designer 在PCB覆铜时,所有的过孔和焊盘都是十字连接即Relief Connect连接的,没有像PROTEL 99SE一样只有接地的焊盘才是十字连接而过孔是直接连接的. 如下图 ...

  2. NSIS脚本调用C语言写的插件

    其实NSIS的官网已经提供了很多别人开发的插件了,今天需要用到GetVersion这个插件,这是不维护的插件了,不推荐用,但是由于现实中的问题,导致我不得不用这个插件. 所以就下载下来了. 下载下来之 ...

  3. ELK 下载地址elastic

    lasticsearch 2.3.5 Elasticsearch can also be installed from our repositories using apt or yum. See R ...

  4. 【No system images installed for this target】的解决方式

    打开eclipse,新建安卓SDK模拟器时,选择完Target之后,再选择CPU/ABI时,默认为No system images installed for this target. 且无法编辑: ...

  5. HashMap Collision Resolution

    Separate Chaining Use data structure (such as linked list) to store multiple items that hash to the ...

  6. JFrame画图基础和事件监听

    消息框 JOptionPane.showMessageDialog(mine.this, "删除不成功!"); 画图 class MyJPanel extends JPanel / ...

  7. security

  8. centos6.4安装Vmware exsi CLI

    1,Vmware官网Exsi CLI下载链接 https://download2.vmware.com/software/sdk/VMware-vSphere-CLI-4.1.0-254719.x86 ...

  9. 齐B小短裙

    女模周蕊微博引关注 火了齐B小短裙毁了干爹[图]_网易新闻中心 齐B小短裙

  10. Spring事务管理器分类

    Spring并不直接管理事务,事实上,它是提供事务的多方选择.你能委托事务的职责给一个特定的平台实现,比如用JTA或者是别的持久机制.Spring的事务管理器可以用下表表示: 事务管理器的实例 目标 ...