텍스트 입력의 기본 스타일은 무엇입니까?

앵커 태그와 똑같이 보이도록 입력을 변경하려하지만 텍스트가 시작되기 전에 어떤 이유로 왼쪽에 1/2 픽셀 간격이 있습니다. 상단에는 1/2 픽셀 간격이 있습니다.텍스트 입력의 기본 스타일은 무엇입니까?

이러한 차이가 어디에서 발생하는지 알고 싶습니다.

(여백, 여백 및 테두리는 제거했습니다.)

정확히 사파리와 파이어 폭스에서 동일한 문제입니다.

출처

2011-09-17 Jai

왜 입력 태그가 앵커 태그처럼 보이는지 궁금하다. –

태그와 입력 태그 사이를 전환하는 메신저이므로 동일한 위치를 유지하고 싶습니다. – Jai

반 화소 간격이 있습니다 ..? –

여기

example jsfiddle

사파리, 크롬, 그리고 IE 모두가 다음과 꽤 잘 협력하는 것 내가 <input type="button" />가 <a> 요소와 동일하게 나타납니다 만들기에 가지고 올 수있는 최선의 방법 :

: (내가 6.0.1를 사용하고 있습니다)

input[type="button"], a { 
    margin:0; 
    padding:0; 
    border:0; 
    cursor:pointer; 
    font:12px/15px Helvetica, Arial, sans-serif; 
    color:blue; 
    text-decoration:underline; 
}

그러나 파이어 폭스는 좀 더 기교를 필요

이 -moz-focus-inner는 요소 주위에 여분의 공간을위한 원인으로 나타나고 두 border 및 padding 내부 브라우저 스타일 시트 설정된다 (고토 자원 : FF //gre-resources/forms.css에 스타일 시트를 보려면)

Firefox는 여전히 제거 할 수없는 텍스트 위에 1 개의 추가 픽셀을 생성했지만 버튼이나 앵커를 토글 할 때 줄 높이가 변경되지 않았기 때문에 부모 div가 높이를 변경하지 않았 음을 의미합니다 요소를 전환 할 때이 1 픽셀로

출처

2011-09-17 21:22:06 MikeM

여기 주된 범인은 나 같았다! Woops, 나는 우연히 텍스트 정렬을 중심으로 설정했지만 공간이 너무 작기 때문에주의하지 않았습니다! 그러나 내면의 초점에 대한 메모에 대해 고맙게 생각합니다. 고맙습니다! – Jai

글자 imputs와 같은 html 요소의 기본 스타일은 브라우저마다 다릅니다. 모든 브라우저에서 동일한 것으로 보이게하려면 CSS에서 모든 항목을 무시해야합니다. 각 주요 브라우저에는 페이지의 요소를 마우스 오른쪽 버튼으로 클릭 할 때 어떤 CSS 속성이 있는지를 보여주는 "inspect"옵션이 제공되는 검사 도구가 있습니다. 크롬과 사파리를 위해 이것은 그것을 형성합니다. firefox의 경우 firebug 플러그인을 설치하십시오. ie8 +를 위해 dev 툴바를 설치하십시오.

출처

2011-09-17 17:05:22

텍스트 입력의 기본 스타일은 무엇입니까?

답변

관련 문제