刚才发现，在Chrome下input标签的不同type类型所取的盒模型是不一样的。浪费了我很多时间去调试，唉。

type="text"时，给它设置宽度width：300px,此时的盒模型是这样的：

即300px指的是content部分的宽度，不包括padding，border，这是W3C标准下的标准盒模型；

而当type=search,buttom,submit时，width：300px的盒模型是这样的：

即包括了padding和border部分，这是微软IE浏览器版本678下的IE盒模型。使用时要注意。

关于input标签不同type下的盒模型的更多相关文章

  1. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  2. W3C标准下的盒模型与IE盒模型

    标准盒模型如下图所示: IE下盒模型如下图所示:

  3. Input标签中Type的类型及详细用法

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是text,这是我们见的最多 ...

  4. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  5. input标签写CSS时需要注意的几点（先收藏）

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  6. 盒模型与在低版本IE下的区别

    对css有一定了解的同学一定听说过盒模型,在这里以我自己的一点儿了解和认知来解释一下盒模型与盒模型在低版本IE浏览器下与其他浏览器下的区别. W3c标准下的盒模型 盒模型由 content(内容),p ...

  7. 关于input标签的需要注意的几个小问题

    1.input元素没有结束标签,只有开始标签,即使写上结束标签也不起作用.如下 <input type="text" value="text" /> ...

  8. Input标签使用整理

    0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能. ...

  9. input标签存在的兼容问题？

    当input标签在type为text时,在Firefox和Safari中的默认高度为22像素(包括上下边框)宽度为146像素(包括左右边框),而在IE中的默认高度为24像素,而宽度却和Firefox和 ...

随机推荐

  1. socket AcceptAsync方法的使用

    AcceptAsync与Accept很大的不一样 Accept是一个同步 阻塞的已经封装好底层的方法 AcceptAsync是一个异步 非阻塞未封装的底层连接入口,需要手动填入连接代码用于优化sock ...

  2. Java 将Excel转为图片、html、XPS、XML、CSV

    通过文档格式转换,可满足不同办公场合对文档操作的需求.本文将介绍转换Excel文档为其他常见文档格式的方法.通过文中的方法,可支持将Excel转换为包括PDF.图片.html.XPS.XML.CSV. ...

  3. 【Nodejs】375- 如何加快 Node.js 应用的启动速度

    我们平时在开发部署 Node.js 应用的过程中,对于应用进程启动的耗时很少有人会关注,大多数的应用 5 分钟左右就可以启动完成,这个过程中会涉及到和集团很多系统的交互,这个耗时看起来也没有什么问题. ...

  4. python数据结构——单向链表

    链表 ( Linked List ) 定义:由许多相同数据类型的数据项按照特定顺序排列而成的线性表. 特点:各个数据在计算机中是随机存放且不连续. 优点:数据的增删改查都很方便,当有新的数据加入的时候 ...

  5. vue 双语言切换中，data内翻译文字不正常切换的解决方案

    背景 有这么一个登录页面,相关功能如下: 支持双语言,点击切换语言 表单内部有一个自定义的select,里面option的label.value都是的名字由外部提供:其中预设的option的label ...

  6. 还不懂MySQL索引？这1次彻底搞懂B+树和B-树

    前言 看了很多关于索引的博客,讲的大同小异.但是始终没有让我明白关于索引的一些概念,如B-Tree索引,Hash索引,唯一索引….或许有很多人和我一样,没搞清楚概念就开始研究B-Tree,B+Tree ...

  7. 面试题：为什么客户端最后还要等待2MSL

    面试题: 为什么客户端最后还要等待2MSL MSL(Maximum Segment Lifetime),TCP允许不同的实现可以设置不同的MSL值. 保证客户端发送的最后一个ACK报文能够到达服务器, ...

  8. java基础-控制流程语句

    一 前言 周末睡觉好舒服,都不想动了,就想睡睡,晒晒太阳,作者劳碌命还是过来写文章了.基础系列文章已经已经出到控制流程,感觉也挺快的,我很自信全网没都多少系列文章能有我这基础系列写的这么好,易于初学者 ...

  9. laravel起步的一些小问题

    工作中主要使用的是.NET,PHP只是我业余喜欢的一门语言,而之前一直用的是yii2框架,觉得Yii2是最好的框架了,然而,laravel在业界的名声太大,被誉为:最优雅的框架,所以,我决定花点时间研 ...

  10. WinForm WebBrowser 设置cookie

    [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true)] public static exte ...