为什么两个高度一样的input，显示不一样高。
0
[已解决问题]
解决于 2013-12-27 13:37
这两个高度设置成一样的input，
都是没有padding 和margin。
都是向左浮动，然后display:inline
都加一像素的实线边框，
为什么显示不一样高。
当把线框线去掉就一样高了。
为什么加了边线就不一样高了？
所有浏览都会的，这是什么特性？还是bug?
我做了段简洁的代码也是这种效果你们看看:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #text { width: 30px; height: 30px; border: 1px solid #000; float: left; } #btn { width: 30px; height: 30px; border: 1px solid #000; float: left; } </style> </head> <body> <input id="text" type="text" name="name" value=" " /> <input id="btn" type="button" name="name" value=" " /> </body> </html>
最佳答案
0
给input text加上如下的CSS：
#text { -moz-box-sizing: border-box; box-sizing: border-box; }
在Chrome/Firefox中测试通过
奖励园豆：5
谢谢，不过这属性恐怕IE6不行吧？
@yeopp: IE6 hack一下
其他回答(2)
0
你应该把代码贴上来。
代码已贴，在上面我的问题那里。兄弟帮忙看一下。
@yeopp: 我测试了很齐，你用的什么浏览器。感觉可能是其他css样式冲突造成的，你可以检查看看。
0
你把代码贴上来，或者发一段这种效果的url地址，让大家帮你看看。
代码已贴，在上面我的问题那里。兄弟帮忙看一下。
@yeopp: 因为text的边框高度是算在了其自身的高度上，所以你把#text的高度设置成height:28px即可，border-right:0px;这样就可以了。
@坤坤: 谢谢您。那么解决方法除了设置btn增加高度还有其他方法吗？比如通过什么属性使btn的border算在height里面跟其他元素一样。
