크롬 : 양식 테두리 반경이 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; 
} 

당신은 30 픽셀 X 30 픽셀 이상이어야 요소가 필요합니다.

신용장은 Paul입니다.