왜 두 개의 단추가 다르게 렌더링됩니까

Question

나는 링크와 단추를 같은 스타일로 지정하려고합니다.

<button> 및 <a>은 (는) 아래의 CSS 선언과 함께 FF로 달리 렌더링되는 이유는 무엇입니까? (버튼의 모서리에 바깥 쪽 테두리가 있고 높이와 길이가 다른 것을 확인하십시오). Chrome에서는 평등하게 렌더링되지만 바깥 쪽 테두리가 있습니다. IE에서는 동등하지만 경계가 둥근 테두리가 없습니다 (IE8은 테두리 반경을 지원하지 않습니다).

은을 heres jsfiddle version 및을 heres CSS를

button, a 
{  
    background-color: #7da7d8; 
    color: #e7e4ed; 
    border: 3px solid #f7f7f7; 
    border-radius: 8px 8px 8px 8px; 
    text-align:center; 
    font-weight: normal; 
    display: inline-block; 
    line-height: 1.2em; 
    margin: 4px; 
    width: 120px;  
    padding: 6px; 
    font-size:1.2em; 
    text-decoration:none; 
    cursor: pointer; 
} 

,이 작업을 수행하는 사용성 문제에 대한 의견을 해달라고하십시오 - 내 이유가있다.

---------- 업데이트 --------------- 아래의 의견에서 Ive는 CSS, check it out on jsfiddle을 업데이트했습니다. 이제 높이를 같게 설정해야합니다. 어떻게 든 그 모서리 경계를 제거하십시오.

Answer 1

짧은 대답 : 브라우저는 실제 양식 요소 (버튼 등)와 ​​텍스트 하이퍼 링크를 다르게 렌더링합니다.

브라우저를 변경하면 이러한 요소를보다 유사하게 렌더링 할 수 있습니다. 그러나 변경할 수없는 다른 사항이 있으므로 픽셀 유사 스타일을 얻을 수 없을 수도 있습니다.

특히, button과 a 사이의 길이가 다른 것은 렌더링에 사용되는 다른 상자 모델 때문입니다. 버튼은 일반적으로 border-box을 사용하지만 거의 모든 것이 content-box (원래 W3C 상자 모델)을 사용합니다. 당신이 해결할 수있는 box-sizing 스타일을 추가하여 :

/* Or border-box */ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 

또 다른 것은 그들의 포함하는 요소에서하지 상속 글꼴 스타일을 폼 요소; 글꼴이 렌더링되는 방식을 변경하려면 해당 요소 자체에 글꼴 스타일을 설정해야합니다.

업데이트 된 바이올린에 관해서는 브라우저 별 불일치이며 사용자가 할 수있는 일은 없을 것이라고 생각합니다. 내가 말했듯이, 픽셀 동일 스타일을 달성하지 못할 수도 있습니다.