以下是示例:http://jsbin.com/zirayuzose/2/
出于某种原因,我需要在包装器元素中设置边框样式的输入,它在Chromium中运行良好,看起来也不错,但在Firefox中,"OK"按钮的高度不同,根据CSS,这是不应该发生的。知道如何挣扎吗?
HTML:
<div class="inpWrap" style="width:25%">
<input class="inp" type="text">
</div>
<div class="inpWrap" style="width:110px">
<button type="submit" class="inp1" style="margin: 0">OK</button>
</div>
CSS:
.inpWrap {
display: inline-block;
border: 2px solid orange;
}
.inp {
width: 96%;
margin: 0px;
padding: 3px;
font-size: 20px;
border: none;
background: #fff;
}
.inp1 {
margin: 0px;
padding: 3px;
font-size: 20px;
border: none;
background: #fff;
}
经过一些小的调整,它看起来就像你想要的一样HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="inpWrap" style="width:60%">
<input class="inp" type="text">
</div>
<div class="inpWrap" style="width:110px">
<button type="submit" class="inp1">OK</button>
</div>
</body>
</html>
CSS
body {
background: #fff;
}
.inpWrap {
display: inline-block;
border: 2px solid orange;
height:34px;
vertical-align:middle;
}
.inp {
width: 96%;
padding: 4px;
font-size: 20px;
border: 1px solid #fff;
background: transparent;
}
.inp1 {
padding: 4px;
height:34px;
font-size: 20px;
border: 1px solid #fff;
background: transparent;
}
试试看:http://jsbin.com/hakajezuba/1/