나는 배송/청구 입력 폼을하고 난크로스 브라우저 입력 필드 폭 양식에
이문제점 ... 문제 같은 폭으로 입력 필드 스타일링에 봉착 :
-a 필드 <input type="text" size="X" />가 나타납니다 다른 브라우저에서 서로 다른 크기로 렌더링합니다 (link 참조).
- 또한 선택 필드는 다르게 렌더링되는 것처럼 보입니다.
-Crome/safari가 선택한 입력란의 font-size 속성에 응답하지 않는 것 같습니다.
텍스트 입력의 크기를 양식화하고 크로스 필드를 선택하는 방법에 대한 지침은 매우 도움이 될 것입니다.
각 입력란마다 브라우저마다 다른 시트가 있어야합니다. -thanks
인라인 "크기"속성을 먼저 제거하십시오.
input[type="text"] {
width: 100px;
/* You can also style padding, margins and everything else,
* just remember that inputs of type "text" can only be one line.
*/
}
CSS를 사용하여 입력 양식의 스타일을 지정해야합니다. [type = "text"]를 선택자로 사용하지 마십시오. 이 예제에서 "text"유형의 입력 필드와 연관시키기 위해 방금 사용했지만 브라우저를 완전히 지원하지는 않습니다. 텍스트 입력 필드에 스타일을 적용 할 자체 클래스를 제공해야합니다.
또한 여백, 테두리 등을 확인하기 위해 CSS 재설정을 잊지 마십시오. al. 모든 브라우저에서 재설정됩니다. http://meyerweb.com/eric/tools/css/reset/
요즘에는 적절하게 브라우저를 지원 한 ch 단위를 사용하여 '크기가 지정된'입력의 너비를 표준화 할 수 있습니다.
input[size] {
width: attr(size) "ch";
}
그래서 우리는 폭 스타일을 가지고
우리가을 알고 우리가 사용됩니다 :input[size="10"] {width: 10ch;}
input[size="20"] {width: 20ch;}
input[size="30"] {width: 30ch;}
/* etc. */
이 쉽게 사용하여 자동화 할 수
불행히도, 쓰기 여전히 불가능 CSS 전 처리기.
업데이트 :
은 내가 test fiddle했다. 현재 (2018 년 2 월 현재) Chrome 63, Edge 41, FF 58이 포함 된 Windows 10에서 작동합니다. IE 11에서는 실패합니다. 나는 OS X에서 시도하지 않았다.
실제로, eric meyer reset을 사용하고 설명한대로 CSS를 사용하여 너비를 스타일링하고, 웹킷을 IE7과 비교할 때 모든 입력 필드의 너비가 같지 않다. -> IE9 –
내 경험에 의하면 , 그것들은 휴식입니다. 예를 들어 입력란을 부모 상자의 너비의 100 %에 맞추는 방법과 같이 상자 모델과 관련하여 구식 불일치가 많이 발생합니다. 일반적으로 상위 상자를 100 % 너비로 설정 한 다음 안쪽 상자의 여백 또는 안쪽 여백 매개 변수를 설정하여이 작업을 수행 할 수 있지만 입력 필드는 자체 포함되어 있으므로 모든 플랫폼에서 방법을 만들 수는 없습니다 텍스트 상자의 너비를 부모 컨테이너에 일관되게 매치 할 수 있습니다 (다른 방법은 깨끗하지 않거나 의미가 없습니다). 이상적으로 상자와 필드는 outerWidth 정의를 가져야합니다. – dclowd9901
이 대답은 입력 상자의 일관된 크기를 제공하지 않습니다. 몇 가지 중요한 정보가 있지만 질문에 대답하지 않습니다. – BishopZ