以下是示例: 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;
}
答案 0 :(得分:0)
通过一些小调整,它看起来完全符合您的要求 的 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;
}