Firefox 2에서
https://stackoverflow.com/questions/1614206
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
Firefox 2에서 HTML Select Box Height에 이상한 문제가 있습니다. 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { margin: 0; padding:0 ;}
div { height: 20px; background:red; float: left; overflow: hidden; }
select { height: 20px; width: 100px; }
</style>
</head>
<body>
<div>Should be same height as </div>
<select><option>this</option></select>
</body>
</html>
높이는 패딩, 글꼴 크기 및 라인 높이에 영향을 미치지 않는 것처럼 보이며 아이디어와 장소가 부족합니다. FF2에서 Select Box의 실제 높이가 항상 CSS 높이 + 2라고 가정해야합니까? 고치거나 해결할 수 있습니까?
해결책
멋진 양식 제어 스타일링 세계에 오신 것을 환영합니다.
패배 주의자들을 소리가 나기를 원하지 않으면 서 포기해야한다고 생각합니다. 스타일을 어떻게 컨트롤하는지에 관계없이 항상 스타일을 완전히 무시하는 브라우저가 있습니다. 나는 사파리가 대부분의 CS를 무시한다고 믿는다. 보다 '스타일링 선택 요소'456 Berea Street에서 예를 들어.
JavaScript를 사용하는 대안이 있습니다 jQuery UI 선택 요소와 유사한 위젯이 있습니다. 당신은 이것을 사용할 수도 있습니다 jQuery 클릭 메뉴 숨겨진 입력 필드의 값을 설정하는 함수를 첨부하십시오. 나는 전에 이것을 해냈고 그것은 훌륭하게 작동합니다. 이런 종류의 것들은 크기와 외관을 완전히 제어 할 수있는 유일한 방법입니다.
다른 팁
일부 브라우저 기본값이있을 수 있습니다. 당신이 사용하는 ID CSS 재설정 그런 다음 스타일을 적용 하시겠습니까? 여전히 2px가 꺼져 있습니까?
CSS를 사용하여 스타일을 지정하십시오. jquery / javaScript를 포용하십시오.
자신만의 이미지를 만들고 해당 이미지의 클릭 이벤트를 사용하여 실제 양식 입력을 전환합니다. 이러한 양식 입력은 컨테이너 스타일 디스플레이에 있어야합니다. 이렇게하면 원하는대로 디자인 할 수 있습니다.
주제에 대한 좋은 기사는 다음과 같습니다.http://www.noupe.com/css/form-elements-40-cssjs-styling-and-function-techniques.html
