首页 新闻 搜索 专区 学院

为什么两个高度一样的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>
yeopp的主页 yeopp | 菜鸟二级 | 园豆:319
提问于:2013-12-27 10:27
< >
分享
最佳答案
0

给input text加上如下的CSS:

#text
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

在Chrome/Firefox中测试通过

奖励园豆:5
dudu | 高人七级 |园豆:36406 | 2013-12-27 11:59

谢谢,不过这属性恐怕IE6不行吧?

yeopp | 园豆:319 (菜鸟二级) | 2013-12-27 13:37

@yeopp: IE6 hack一下

dudu | 园豆:36406 (高人七级) | 2013-12-27 13:40
其他回答(2)
0

你应该把代码贴上来。

aehyok | 园豆:1012 (小虾三级) | 2013-12-27 10:32

代码已贴,在上面我的问题那里。兄弟帮忙看一下。

支持(0) 反对(0) yeopp | 园豆:319 (菜鸟二级) | 2013-12-27 10:42

@yeopp: 我测试了很齐,你用的什么浏览器。感觉可能是其他css样式冲突造成的,你可以检查看看。

支持(0) 反对(0) aehyok | 园豆:1012 (小虾三级) | 2013-12-27 10:46
0

你把代码贴上来,或者发一段这种效果的url地址,让大家帮你看看。

坤坤 | 园豆:919 (小虾三级) | 2013-12-27 10:38

代码已贴,在上面我的问题那里。兄弟帮忙看一下。

支持(0) 反对(0) yeopp | 园豆:319 (菜鸟二级) | 2013-12-27 10:42

@yeopp: 因为text的边框高度是算在了其自身的高度上,所以你把#text的高度设置成height:28px即可,border-right:0px;这样就可以了。

支持(0) 反对(0) 坤坤 | 园豆:919 (小虾三级) | 2013-12-27 10:57

@坤坤: 谢谢您。那么解决方法除了设置btn增加高度还有其他方法吗?比如通过什么属性使btn的border算在height里面跟其他元素一样。

支持(0) 反对(0) yeopp | 园豆:319 (菜鸟二级) | 2013-12-27 10:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册