단추 모양으로 링크가 높이가 일치하지 않습니다.

Question

스타일이 지정된 단추와 스타일이 지정된 링크가 있습니다 (단추의 스타일과 일치시키기 위해). 크롬 13, Firefox 6 및 IE 9에서 테스트하고 있습니다. Firefox에서 링크의 높이가 더 짧지 만 버튼과 링크가 세 브라우저 모두에서 동일하게 보입니다. http://jsfiddle.net/AWcYG/

블록 레벨 요소가 아니기 때문에 링크에 높이를 적용 할 수 없습니다. 블럭 레벨 요소로 만들면 두 요소를 서로 맞 춥니 다. 또한 높이가 세 브라우저에서 모두 해제됩니다. 나는 절대 위치에 대해 생각했지만, 나는 그들의 위치를 ​​하드 코딩하지 않으면 서로를 옆에 놓을 방법이 보이지 않는다.

조건문을 사용하는 것 외에 세 가지 브라우저 모두에서 버튼과 링크의 높이를 일치시키는 방법이 있습니까? 어쩌면 내가 알지 못하는 해킹 일 수도 있고 아니면 뭔가를 놓친 것일 수도 있습니다.

UPDATE : 그 방향으로 날을 가리키는위한

@Wesley 감사합니다.

button::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
    padding: 0px 2px 0px 2px; 
    border: 1px dotted transparent; 
    } 

결과 완벽에 가까운,하지만 파이어 폭스 6은 1 x 1 픽셀에 의해 떨어져 여전히 : 나는 파이어 폭스 코드는 그것이 무엇을합니까 이유를 설명의 버튼에 다음과 같은 추가 사실을 발견했다. 나는 이것을 조금 더 연구하고 수정 사항을 발견하면 또 다른 업데이트를 게시 할 것입니다.하지만 1px를 꺼놓을지라도 이전보다 훨씬 좋습니다!

업데이트 2 :

내가 찾은 수정했다 버튼의 높이를 지정합니다 세에,

.db .menu input, 
.db .menu a { 
    background-color: #01137F; 
    border: 1px solid #fff; 
    border-radius: 5px; 
    box-shadow: 2px 2px 3px #666; 
    color: #fff; 
    cursor: pointer; 
    font-family: Arial, sans-serif; 
    font-size: 14px; 
    height: 26px; 
    padding: 4px 10px; 
    } 

이 높이를 추가하면 픽셀에 정확히 같은 버튼을, 렌더링을 내가 언급했던 브라우저들.

Answer 1

Firefox는 <button>과 분명히 <input> 버튼에 관한 특별한 요구 사항이있는 것 같습니다. 모질라 전용 CSS의이 비트 시도해보십시오

.menu input::-moz-focus-inner { 
    padding:0; 
    border:0; 
} 

내가 일주일 동안 오래 전에이 붙어되고 기억하고 #css의 IRC에서 누군가가 나에게이 트릭을 보여 주었다를, 패딩을 정상화 것으로 보인다.

데모 : http://jsfiddle.net/AWcYG/1/ 올바른 방향으로 날을 가리키는 위해