Chrome：フォーム境界の半径がFirefoxと異なっています

Question

Firefoxで完全に機能するHTML/CSSがあります。ただし、Chromeでは、フォーム/境界線が詰まっています。私は時間を無駄にするコードを使って遊んでいる。誰でも助けてくれますか？ありがとう！ 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 /> 

Answer 1

入力の場合はknown chrome bugなので、ボーダー半径をt以上にすることはできません彼は要素の高さです。完全に丸くしたい場合は、寸法が正確であることを確認してください。

コード：15ピクセルのボーダー半径については

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

あなたは、少なくとも30px X 30pxでなければならない要素が必要です。

クレジットはPaulになります。