以前一直一位input是个行内元素，但是，行内元素的特性就是没有宽高的概念，元素多高，多宽，全凭内容撑起来的。

但是今天写了个demo,用chrome控制台显示：display:inline-block。

但是给label和input同时加上宽度和高度，input的高宽居然变了，但是奇怪的是在IE6.0下居然也生效，IE6.0不是不支持inline-block么？demo如下：

<!DOCTYPE html>
<html>
<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>无标题文档</title>

　　<style type="text/css">

　　　　label {width:500px;height:50px;}

　　　　input {width:200px;height:50px;}

　　</style>

</head>

<body>

    <label for="mail">email</label>

    <input id="mail" type="text" />

</body>

</html>

搜翻看论坛的过程中，得到的解释是：input和img属于可置换inline元素（Replaced element），可置换元素拥有内在尺寸（intrinsic dimensions），所以说他是天生的inline-block。

另外了解到inline-block就是由 替换元素  演变而来，IE没有将二者区分开，此外，inline-block 在 CSS 2.1 中才正式确定，而 IE6 的诞生远早于 CSS 2.1。

通过审查元素,IE7下input是属于inline标签,IE8及以上就都是display：inline-block;

下图是关于display的声明，网站原地址

另外label标签是是属于inline元素，这个没啥问题。

当然了，你如果将input人为设置为block，它自然是独占一行了，如下图

当你将input设置了float属性，它会脱离文档流，就没有换行，多个input会在一行上面。 如下图：

为什么在input中加了display:inline;再加宽，还有作用？的更多相关文章

  1. JS实现input中输入数字，控制每四位加一个空格（银行卡号格式）

    前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法! ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

    系列目录    [已更新最新开发文章,点击查看详细]  在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  8. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  9. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

随机推荐

  1. 【Linux驱动】TQ2440 DM9000E网卡驱动移植（Linux-2.6.30.4）

    花了一天的时间研究了一下Linux-2.6.30.4版本号内核下关于TQ2440 DM9000E的网卡驱动移植.总结一下自己的收获. 事实上.在Linux-2.6.30.4版本号内核下有关于网卡驱动, ...

  2. 站点搭建从零開始（二）server空间

    前面介绍了域名相关知识.这里介绍server,也经常被叫做空间.也就是站点数据实际保存的地方. 1.整体介绍 依据国家相关规定,国内server空间须要进行备案.也就是到相关的机构进行登记.详细方法能 ...

  3. 使用LSTM做电影评论负面检测——使用朴素贝叶斯才51%，但是使用LSTM可以达到99%准确度

    基本思路: 每个评论取前200个单词.然后生成词汇表,利用词汇index标注评论(对 每条评论的前200个单词编号而已),然后使用LSTM做正负评论检测. 代码解读见[[[评论]]]!embeddin ...

  4. Windbg调试托管代码

    Windbg调试.net托管代码需要借助于SOS.dll,.Net 4.0的32位sos.dll的路径在C:\Windows\Microsoft.NET\Framework\v4.0.30319,64 ...

  5. Java经典逻辑编程50题

    Java经典逻辑编程50题 2016-11-03 09:29:28      0个评论    来源:Alias_fa的博客    收藏   我要投稿 [程序1] 題目:古典问题:有一对兔子,从出生后第 ...

  6. 如何用一个app操作另外一个app.比如微信群控那样的

    如何实现一个app.控制另外的app,比如市面上群控微信的,是用测试工具的原理?还是什么模拟点击的原理? 如何用一个app操作另外一个app.比如微信群控那样的 >> android这个答 ...

  7. 解决maven 无法下载java-memcached的依赖问题

    1.进入https://github.com/gwhalin/Memcached-Java-Client/downloads 下载java-memcached的jar包. 2.使用cmd进入maven ...

  8. HDU 1175 连连看【BFS】

    题意:给出起点和终点的棋子,不能经过别的棋子,而且转弯的次数不能超过2次,问能否消除 和逃离迷宫一样,每个节点记录下来它的当前的方向和转弯的次数,再搜 注意特判起点的棋子和终点的棋子为0或者不一样的情 ...

  9. 优动漫PAINT-牵牛花画法教程

    喇叭型对画者自身的塑形功力会有较高的要求,作者很靠谱的把他的塑形方式详细呈现了出来~ 对于这样的一个仿真效果的牵牛花完全可以使用优动漫PAINT完成,简单又快捷,软件下载:http://www.don ...

  10. rsyslog 存储到 mysql

    输出Host1/2的系统日志, 记录到mysql服务器数据库中, 并发布loganalyzer 结构关系如下图: 思路: 通过远程连接mysql, 使得rsyslog的log记录能够写入到mysql中 ...