Question

我正在尝试使用带有文本字段的按钮，所以我一直在尝试不同尺寸（高度按钮），直到它们丢失。问题是：Chrome浏览器看起来很棒，但在Firefox中它们并不符合我的预期。我该如何解决？

感谢您的帮助！

铬：

http://imageshack.us/a/img401/5964/mlvq.png

火狐：

http://imageshack.us/a/img707/2672/u1c.png

代码：

#textfield
    width: 120px;
    border: 1px solid #aaa;
    border-radius: 8px 0 0 8px;
    padding-top: 5px;
    font: 22px Arial, Helvetica; 
    padding-bottom: 5px;
    padding-left: 5px;
    box-shadow: 0px 0px 3px #E7E7E7, 0 10px 15px #E7E7E7 inset;
    outline: none;
}


#button {
    border-radius: 0 8px 8px 0;
    border: 1px solid #aaa;
    padding-top: 5px;
    margin-left: -5px;
    -moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background-color:#77d42a;    
    display:inline-block;
    color:#306108;
    font-family:arial;
    font-size: 20px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    padding-top: 7px;
    text-shadow:0px 1px 0px #aade7c;
}

Answer 1

你不应该指定它们的高度吗？

height: XXpx;

如何完美地适应带有文本字段的按钮

1 个答案: