CSS로 버튼과 앵커를 정규화하는 방법은 무엇입니까?

단추 및 앵커 코드 샘플을 확인하십시오. http://jsbin.com/ecitex/2/edit CSS로 버튼과 앵커를 정규화하는 방법은 무엇입니까?

모든 브라우저에서 동일한 것으로 지정하려고합니다. 그러나 차이점은 남아 있으며 모든 브라우저마다 다른 점이 있습니다 (Chrome, Safari, Firefox, IE8 사용).

어떤 CSS 정규화가 누락 되었습니까?

는 업데이트 : 당 제안 :

내가 추가 line-height: 50px (내 사용자 에이전트의 (크롬) 기본 있지만 line-heightbutton 요소는 normal, 그리고 여전히 수직으로 텍스트를 중심으로 - 어떻게?!)
마우스 커서를 정규화하기 위해 cursor: pointer을 추가했습니다.

http://jsbin.com/ecitex/11/edit

그래서, 지금 파이어 폭스의 결과를 체크 아웃 : 버튼의 패딩을 발견? 그런 다음 IE8에서 결과를 확인하십시오. 와우, 두 가지가 완전하고 완전히 다른 점에 유의하십시오!

업데이트 2 :

IE의 문제가 알려진 분해 할 수없는 것 같다 : http://www.quirksmode.org/css/tests/mozie_button2.html

나는 파이어 폭스의 패딩에 아무것도하지만 발견하지 않았습니다. 합니다 (쿼크 모드의 문서는 모질라의 문제를 언급,하지만 그건 다른 문제입니다.) 3

업데이트 : 지금까지 http://jsbin.com/ecitex/15/edit

좋아요 :

최고, 우리는 파이어 폭스의 문제를 해결 모든 단일 답변은 솔루션의 일부를 제공하고 있으므로 단 하나의 최선의 답변은 없습니다. button 수직 단순한 line-height: normal와 텍스트를 중심으로있는 동안, 우리는 a 수직 중심 텍스트에 line-height: 50px를 지정해야하는 이유

설명 : 나도이 사람에게 가장 좋은 대답을 부여 할 수 있습니다.
IE 문제의 해결 방법을 제공합니다.

출처

2012-11-12 Tim Molendijk

당신은 사용하여 파이어 폭스에서 여분의 패딩을 제거 할 수 있습니다

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

에릭로부터 좋은 설명이다 메이어 (Meyer)는 50px : http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/으로 명시 적으로 설정해야하는 이유를 설명하는 줄 높이에 대해 설명합니다.

button, a { 
    display: inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 10px 0; 
    padding: 0px; 
    height: 50px; 
    border-width: 0; 
    background-color: Red; 
    color: White; 
    font-family: sans-serif; 
    font-weight: normal; 
    font-size: inherit; 
    text-decoration: none; 
    line-height: 50px; 
    cursor: pointer; 
    font-size: 100%; 
} 
button { 
    #width:0px; 
    overflow: visible; 
} 
button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

: 여기

는 IE에서 글꼴 크기 문제를 해결 몇 가지 새로운 CSS입니다

출처

2012-11-14 16:55:59

당신은 포인터를 추가하기 위해 속성 cursor:pointer;를 추가하려면 앵커 태그 텍스트의 상하 중앙에

Demo

CSS

button, a { 
    display: inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 10px 0; 
    padding: 0; 
    height: 50px; 
    border-width: 0; 
    background-color: Red; 
    color: White; 
    font-family: sans-serif; 
    font-weight: normal; 
    font-size: inherit; 
    text-decoration: none; 
    line-height: 50px; <-------- Here 
}

출처

2012-11-12 16:22:59

을 가지고 line-height 속성을 사용할 필요가있을 때 마우스 마우스를 올리면 (입력에 항상있는 것은 아닙니다)

는 수직 정렬

에 대한 마지막 사용 line-height:46px;에서 전체 코드는 여기 ->http://jsbin.com/ecitex/10/edit

출처

2012-11-12 16:31:18

CSS로 버튼과 앵커를 정규화하는 방법은 무엇입니까?

답변

관련 문제