Chrome, Firefox 및 IE가 모두 고정 너비 SELECT 컨트롤을 다르게 렌더링하는 이유는 무엇입니까?

StackOverflow https://stackoverflow.com/questions/135076

  •  02-07-2019
  •  | 
  •  

문제

그래요 머리카락이 빠지다 이것에 ...HTML SELECT 컨트롤의 너비를 수정하면 브라우저에 따라 너비가 다르게 렌더링되는 것 같습니다.

여러 스타일 시트를 사용하지 않고도 이를 표준화하는 방법을 아시나요?

제가 작업하고 있는 작업은 다음과 같습니다.

.combo
{
    padding: 2px;
    width: 200px;
}

.text
{
    padding: 2px;
    width: 200px;
}

페이지에 대한 내 문서 유형은 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
도움이 되었습니까?

해결책

양식 컨트롤은 항상 스타일링 시도, 특히 선택 및 파일 입력에 대해 덜 순종 할 것이므로 크로스 브라우저를 안정적으로 스타일링하고 미래 방지를 염두에 두는 유일한 방법은 JavaScript 또는 플래시로 대체하고 기능을 모방하는 것입니다.

다른 팁

설정해보십시오 font-size Select에서도 이는 렌더링 방식에 영향을 줄 수 있습니다. 또한 고려하십시오 min-width 그리고 max-width 속성.

입력 [type = text], select {border : solid 1px #c2c1c1; 너비 : 150px; 패딩 : 2px; }

// 그 다음에

{너비 : 156px; // 입력해야합니다 [type = text] width + (테두리 및 패딩)}}

/* 입력 [type = text] 너비 = 너비 + 패딩 + 테두리

선택 너비는 너비와 같습니다. 패딩과 테두리는 그 너비 제약 조건으로 렌더링됩니다. 그게 바로 롤스를 선택하는 방식입니다 ...

*/

모든 기본 마진과 패딩을 제거하고 명시 적으로 정의하십시오. 적절한 DocType를 사용하고 있으므로 표준 모드에서 IE를 렌더링하십시오.

가짜 드롭 다운 위젯을 사용하고 선택을 교체 할 수 있습니다.

브라우저는 CSS로 컨트롤을 스타일로 스타일링 할 수있는 양을 제한하는 경향이 있습니다. 양식 컨트롤에는 운영 체제마다 다른 복잡한 스타일이 많기 때문입니다. CSS는 완전히 설명 할 수 없으므로 브라우저는 일부를 제한하지 않습니다.

Eric Meyer는 주제에 대한 좋은 기사를 썼습니다.

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

당신이 할 수있는 최선은 형태의 모양을 완전히 제어 할 수 없다는 것을 받아들이고, 어떤 스타일링이 무엇이든 실험하는 것이 정말로 중요합니다.

사용해보십시오 개똥 벌레 또는 Chrome의 "요소 검사"기능 (컨트롤 선택을 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 클릭하여 해당 특정 객체에 대해 상속/렌더링되는 스타일 속성을 정확히 확인하십시오. 그것은 당신을 올바른 방향으로 인도해야합니다.

나는이 제안을 모두 시도했습니다 ...그리고 마침내 그것을 갖게 되어서 IE와 Firefox에서 보기 좋게 보입니다.SELECT 컨트롤의 패딩에 문제가 있는 것 같습니다.SELECT의 너비를 2픽셀씩 늘리면 이제 크기가 올바르게 조정됩니다. 

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

그러나 Chrome에서는 여전히 동일한 크기를 표시하지 않습니다.

마티 네이터가 맞습니다.

Bowser를 통해 다양한 유형의 입력 또는 메뉴의 너비를 제어하려고하는 것처럼 들립니다. 객체를 직접 선택하고 너비를 지정할 수 있습니다. 예를 들어:

select {
  width:350px;
}

또는 텍스트 영역 으로이 작업을 수행 할 수 있습니다.

select {
      width:350px;
}

다른 유형의 입력에는 구문 Martinator 언급이 필요합니다. 따라서 텍스트, 입력 또는 파일 유형 입력의 경우 각각에 대해이 작업을 수행합니다.

input[type=text] {
      width:350px;
}

input[type=input] {
      width:350px;
}

input[type=file] {
      width:350px;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top