이 코드 예제를 참조하십시오 : http://jsfiddle.net/Z2BMK/
Chrome / IE8은 다음과 같습니다.
Firefox는 다음과 같습니다.
내 CSS는
button {
padding:0;
background:#080;
color:white;
border:solid 2px;
border-color: #0c0 #030 #030 #0c0;
margin:0;
}
두 브라우저에서 버튼을 동일하게 만들기 위해 코드 샘플을 어떻게 변경할 수 있습니까? JavaScript 기반 하이퍼 링크는 키보드의 스페이스 바와 함께 작동하지 않고 작업 href을 처리하는 깔끔한 방법이 아닌 URL이 있어야하므로 사용하고 싶지 않습니다 .
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
border-width의가 -moz-focus-inner있었다 1px쓰기 때문에, 기본적으로 border-width코드에 중복이지만, 더 무슨 일이 일어나고 있는지 취소합니다. 미래 보장에도 도움이 될 수 있습니다. 귀하의 질문에 대답하기 위해 border-widthFirefox에서 차이의 원인이었고 추가 margin: -1px는 이전 솔루션보다 더 호환되는 솔루션입니다.
margin: -1px. 이것은 너무 복잡합니다. 1) 렌더링 엔진의 버그가 나타나는 경우 (발생), 2) 테두리가 다른 색상으로 표시됨, 3) 확대합니다. 솔루션의 잠재적 인 문제를 설명하기 위해 fiddle을 준비했습니다. jsfiddle.net/Z2BMK / 455 . 확대하면 빨간색 테두리가 나타납니다.
답변:
이거 추가 해봐:
button::-moz-focus-inner {
padding: 0;
border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/
border위 의 규칙을 포함하는 것은 버튼이 두 브라우저에서 동일하게 보이도록하는 데 필요하지만, 버튼이 activeFirefox에 있을 때 점선 윤곽선을 제거합니다 . 많은 개발자가이 점선 윤곽선을 제거하고 선택적으로 시각적으로 더 친숙한 것으로 대체합니다.
button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}. 이것은 점선이없는 것을 보상하고 내가 추구했던 브라우저 일관성을 제공합니다.
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
fileCSS). 죄송합니다. 내가 시도한 페이지에 충돌하는 CSS가 있어야합니다. 감사.
입력 요소에서도 수정하려면
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
간단하고 완벽합니다!
input[type="file"] > input[type="button"]::-moz-focus-inner를) 이미 추가했기 때문에 중복 input[type="button"]::-moz-focus-inner되지 않습니까? 아니면 귀하의 경험이 아닙니까? 알고 계십니까?
margin: -1px입니까? 어떻게 든 연결되어border: 2px있습니까?