입력 (제출) 요소가 Firefox에서 추가 공간을 차지합니다

링크, 입력 (제출) 및 범위가있는 웹 페이지입니다. 모두 같은 모양을 갖도록 스타일이 지정되어 있습니다. 실제로는 하이퍼 링크와 스팬과 동일한 모양을 갖도록 입력 스타일이 지정됩니다.입력 (제출) 요소가 Firefox에서 추가 공간을 차지합니다

사용하여 테스트 : 파이어 폭스 3.0, 3.6, 4.0, 어떤 이유 14.0.1

는, 입력이 다른 사람의 사이에서 약간 크다. 또한 입력 텍스트가 링크 및 범위 텍스트와 맞지 않습니다. 여기에 라이브 데모가 있습니다.

http://jsfiddle.net/LGftW/

여기 내 CSS의 :

a{ 
    text-decoration:none; 
} 

input[type="submit"]{ 
    border:0 none; 
    background:transparent; 
} 

a, input[type="submit"], span{ 
    border:solid 1px green; 
    font-size:64px; 
    font-family:Arial; 
    font-weight:bold; 
    float:left; 
    padding:0; 
    margin:0; 
}

마크 업 :

<a href="#">LINK</a> 
<input type="submit" value="INPUT" /> 
<span>SPAN</span>

그래서 어떻게 입력은 보통의 링크처럼 또는 걸쳐 만들 수 있습니까? 브라우저의 동작이 이상한가 아니면 그냥 CSS를 놓친 것입니까? 나는 하루 동안 이것을 해결해왔다. 문제는 파이어 폭스에서 발생하는 같은

편집

보인다. IE8-9와 Chrome이 올바르게 표시됩니다. 당신의 CSS에 input::-moz-focus-inner를 사용하여 파이어 폭스에서

출처

2012-07-26 dpp

에 그냥 있기 때문에 내가 불을 지르고 사용 Mr.Alien @은'글꼴 size' –

의 그리고 그것은 그들 모두가 64px의 글꼴 크기를 말한다. 또한, 그것은 내 CSS에, 당신은 그것을 보지 못했습니까? – dpp

@dpp 바이올린은 괜찮아 보입니다. 그렇게 생각하지 않습니까? 당신이 제공 한 이미지와 다릅니다. – freebird

제거 버튼 패딩 :

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
}

편집 : 위의 코드와 업데이트 된 데모 링크.

SEE DEMO 파이어 폭스

출처

2012-07-26 05:50:39

아니요! 높이가 아직 일치하지 않습니다 – Dipak

@ 디팍스 : 그것은 내 편이 잘 작동합니다. Firefox14.0.1을 사용하고 있습니다. –

나는 같은 것을 사용하고있다. 녹색 경계를 보았는가? 다른 것 – Dipak

입력 (제출) 요소가 Firefox에서 추가 공간을 차지합니다

답변

관련 문제