javascript - CSS style button look difference in FF and Chromium -
here example: http://jsbin.com/zirayuzose/2/
for reason need inputs borders styled in wrapper elements, , works fine andd looks fine in chromium, in firefox "ok" button has different height here, should not happen according css. idea how struggle it.
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; }
with minor adjustments looks want 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; } try it: http://jsbin.com/hakajezuba/1/