CSS样式按钮在FF和Chromium中看起来不同

时间:2015-04-09 19:49:02

标签: javascript html css

以下是示例: 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;
}

1 个答案:

答案 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;
    }

试一试:http://jsbin.com/hakajezuba/1/