为什么input可以设置宽度

峭沙 2012-01-09 10:16:10

一直对这个问题相当的不解，按照css的定义，行内(内联)元素不是不可以设置宽度高度吗，为神马身为行内元素的input却可以呢？有没有大牛解释下

...全文

901 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

tantaiyizu 2012-10-08

打赏
举报

[Quote=引用 7 楼的回复:]

好吧，经过测试原来这是firefox的bug。。JScript code
<!doctype>
<html>
<head>
<style>
</style>
</head>
<body>
<input type="text" value="text" id="input"/>
<script>
var input = document.getEl……
[/Quote]

谁说的IE6不支持inline-block？或者你是从哪里看到的？

lz12366007 2012-03-08

打赏
举报

行内元素 button img都可以设置宽度。。。怎么解释

峭沙 2012-01-09

打赏
举报

好吧，经过测试原来这是firefox的bug。。

<!doctype>

<html>

<head>

	<style>

	</style>

</head>

<body>

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

	<script>

		var input = document.getElementById('input'),

			input_style = window.getComputedStyle ? window.getComputedStyle(input, null) : input.currentStyle;

		alert(input_style.display);

	</script>

</body>

</html>

在其他浏览器中，input的display=inline-block；而在firefox中却是inline。。不过又有一个疑问了，在ie6不支持inline-block，谁手头上有ie6能帮忙测下么？

峭沙 2012-01-09

打赏
举报

什么是行内元素，什么是块级元素我懂，请不要给我扫盲好吗。。

峭沙 2012-01-09

打赏
举报

[Quote=引用 3 楼 zsx841021 的回复:]

某次布局时无意发现一个有意思的问题。就是之前前的观念是<input>是内联元素，而内联元素的宽高都是不能定的。但是很明显<input>是可以给宽高的，为什么呢？要想弄清楚，首先我们要弄清inline-block这个属性，请点击这里查看：inline-block属性。其实很简单，inline-block特性就是元素的外部是内联元素，而内部确是块级元素特性，而<input>天生的inline-blo……
[/Quote]我以前就是这样理解的，但是。。还是你自己用firebug看一下吧。。

shenzhenNBA 2012-01-09

打赏
举报

大致这样理解：
行内(内联)元素是相对于左右两边元素而言，于其它兄弟元素可同在一行内显示的可称行内元素，对于仅仅是数据显示类元素如span等，估计不能设置宽高吧，对于输入类元素，如input等可以设置高度。。。看来应该这样理解,

三石-gary 2012-01-09

打赏
举报

某次布局时无意发现一个有意思的问题。就是之前前的观念是<input>是内联元素，而内联元素的宽高都是不能定的。但是很明显<input>是可以给宽高的，为什么呢？要想弄清楚，首先我们要弄清inline-block这个属性，请点击这里查看：inline-block属性。其实很简单，inline-block特性就是元素的外部是内联元素，而内部确是块级元素特性，而<input>天生的inline-block属性。这样就好解释了，<input>元素并没有另起一行，因为它的外部是内联元素，但它可以定宽高，因为它的内部是块级元素。所以在说内联元素和块级元素的时候，一定要将<input>做为一个特例来理解。..

这是某个人的解释。。。

峭沙 2012-01-09