Chrome：表单边框半径与Firefox不同

Question

我有一些HTML/CSS，它在Firefox中完美运行；然而，在Chrome中，表单/边框被挤压了！我已经调整了代码数个小时，但没有任何效果。能否请有经验的人士帮忙解决？谢谢！

这里是jsfiddle链接: http://jsfiddle.net/W22DC/19/

或者如果您更喜欢，下面是代码......

CSS：

.form1 input{
font-weight:normal;
font-size:100%;
border: 2px solid purple;
-moz-border-radius:15px;
-khtml-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px 15px 15px 15px;
background-color:transparent;    
padding: 2px 6px 2px 6px;
}
.form1 input:hover, input:focus{
border: 2px solid black;
cursor:pointer;
}

HTML代码：

<br />
<div class="form1" align="center"><form name="Example" action="" method="post" style="margin-bottom: 0">
<input type="submit" name="submit" value="7" />
</form></div>
<br />

- Pamela

Answer 1

这是一个 已知的 Chrome bug，它会影响输入框，如果边框圆角的值大于元素高度，将无法显示。如果要实现完美的圆角效果，请确保元素尺寸精确。

e.g. Code:

.form1 input{
    font-weight:normal;
    font-size:100%;
    border: 2px solid purple;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    background-color:transparent;        
    padding:0;
    height:30px;
    width:30px;
    line-height:28px;
    text-align:center;
}
    .form1 input:hover, input:focus{
    border: 2px solid black;
    cursor:pointer;
}

“对于一个15像素的边框半径，您需要一个至少为30像素 x 30像素的元素。”

“感谢保罗。”

- Pamela