样式输入和按钮 - 高度问题

Question

我正在尝试设置一个干净的CSS来设置按钮的样式,以便在视觉上看起来与近输入字段合并.

我目前正在使用这个CSS:

button {
    position: relative;
    left: -4px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    font-size: 17px;
    border: 1px solid gray;
    border-radius: 0 3px 3px 0;
}

http://jsfiddle.net/GRwqL/

主要问题是left属性的使用,我不认为这是一个好习惯,主要是因为它在所有浏览器上都没有正确处理.
另一个问题是Internet Explorer和Firefox中的此代码使按钮不高作为输入字段.

所以我正在寻找一些帮助,以编写更好的代码跨浏览器和更清洁.
就个人而言,我不在乎是否需要一个包装元素或任何其他HTML元素,我只需要一个干净的代码,跨浏览器,并且运行良好.

Answer 1

<span class="inputWithButton">
  <input type="text"><button>Submit</button>
</span>

 input, button{outline: none;}

.inputWithButton{
    display:inline-block;
    overflow:hidden;
    border:1px solid gray;
    border-radius: 3px;
}
.inputWithButton > *{
    vertical-align:top;
    border:0;
    margin:0;
    padding: 3px 10px;
}
.inputWithButton > input[type=text]{
    width:150px;
}
.inputWithButton > button{
    border-left:1px solid gray;
    background:#eee;
    cursor:pointer;
    width:70px;
}
.inputWithButton > button::-moz-focus-inner {
  border: 0;
}

具有更高填充和不同边框颜色的演示：http://jsbin.com/OPiroyib/4/edit

^{（只需从 中删除边框span并为输入和按钮添加边框）就这么简单。}