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

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

javascript html css

Javascript FF和Chromium中的CSS样式按钮外观差异,javascript,html,css,Javascript,Html,Css,下面是一个例子：出于某种原因，我需要在包装器元素中使用边框样式的输入，在Chromium中效果很好，看起来也不错，但在Firefox中，“OK”按钮在这里的高度不同，根据CSS，这是不应该发生的。你知道怎么挣扎吗 HTML: 经过一些小的调整，它看起来就像你想要的那样 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</tit

下面是一个例子：

出于某种原因，我需要在包装器元素中使用边框样式的输入，在Chromium中效果很好，看起来也不错，但在Firefox中，“OK”按钮在这里的高度不同，根据CSS，这是不应该发生的。你知道怎么挣扎吗

HTML:

经过一些小的调整，它看起来就像你想要的那样 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。尝试为按钮指定

行高

。您需要避免硬编码高度，并且在FF输入字段中，边框看起来已损坏。以上内容在IE11、chrome、opera和FF上进行了测试

.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;
}

<!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>

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