FF和Chromium中CSS样式按钮的外观差异

CSS style button look difference in FF and Chromium

本文关键字：外观 按钮 样式 Chromium CSS FF      更新时间：2023-09-26

以下是示例：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/

相关文章：