phpstudy集成环境

 首页 > input和button在一行写，一样的高度，为什么浏览器里不一样？

input和button在一行写，一样的高度，为什么浏览器里不一样？

input和button在一行写，一样的高度，为什么浏览器里不一样？

<div>用户名：<input type="text" name="update_user_name" id="update_user_name"> <button class="update_btn">修改</button></div>

如图，看上去不一样高呢，我css设置的分明是一样高的啊。

好问题。

button点击后有选中效果，额外加上一条线站位。这一点类似 @那儿有个活人

如果你想要等高，可以设置border=0

html code :

<div>用户名：<input class="a1" type="text" name="update_user_name" id="update_user_name"> 
<button class="a2">修改</button></div>

css code:

.a2 {
    border:0
}

我猜button比input高了1像素,为了是按下去时产生动画效果,所以,答案是本来就这样,嘻嘻

试试左浮动，也许管用。

觉得这个问题挺有意思，小小地试了下，首先说下自己这边的环境

系统是windows XP SP3 32位（别吐槽……），Chrome版本41.0，FireFox版本36.0.4，IE是用的IE8

看看默认样式先——chrome：

完美对齐！button点击后也无移位，看了下默认样式，input和button的display都为inline-block

FF：

同样对齐OK！不过不同的是，FF下input的display是inline，button依然是inline-block
IE8：

不负众望地歪了！而且更坑爹的是，你点击它还回去了

我不会用IE这个F12……所以没法确定这俩元素使用什么模式渲染的

接下来给input和button加上40px的height试试看

chrome和FF的input框都大了一些，这是box-sizing的原因，但是对齐上是没有问题的，不过IE爆炸了……
这次再把box-sizing加上，然后改一下btn的样式，弄得看起来比较像题主的那个btn

    .btn{
        background: #eee;
        border: 1px solid #aaa;
        border-radius: 0;/*省略所有浏览器前缀*/
        box-sizing: border-box;
    }


嗯……木啥问题

………………………意料之中吧

另外要说的是，所谓btn控件位移的问题，在chrome和FF中都没有发生，chrome中btn元素被自定义后自带的按下效果直接消失了，而FF里面也只有里面的文字移动，边框也是稳如泰山，IE的按钮在修改后位移也消失了，虽然测试得非常片面，不过我觉得整个盒子为了按钮效果而发生位移不太科学……

接下来只剩把IE对齐了

IE8也是支持inline-block属性的，所以可以将所有元素设置成inline-block再用vertical-align对齐

    all {
        display: inline-block;
        vertical-align: middle;/*top什么的都行……baseline的话可能要确认下line-height*/
    }


IE吃药了。这里line-height还有一些小问题，先不管。

之后又试了下其他方式的对齐，发现都不太好使。

那么问题来了……

题主用的啥米浏览器？



box-sizing: border-box;加上这个就对齐了，你问的是为什么不一样，是因为差了俩像素，至于为什么差了俩像素，逃.......

我也遇到过同样的问题，今天搜索答案也是刚刚看到这个问题就进来看了一下，木有找到答案

 <div class="search">
   <input type="text">
    <button>搜索</button>
  </div>

题主的按钮是比较高，我的按钮是比较低一点，然后我就看了一下按钮的box如下图

发现padding-top和padding-bottom不一致，然后我就把上下padding调整成一致，问题就解决了

对比之前

不知道是否能解决题主的问题，反正我的问题是解决了，thx

【热门文章】
【热门文章】