Ext 3.x에서 4로 기존 응용 프로그램을 업데이트하는 중입니다. Ext의 범위 재설정 CSS 옵션을 활성화하여 Ext가 CSS를 적용하지 못하도록 관리했습니다. 내 전체 응용 프로그램으로 재설정, 그러나 지금은 또 다른 문제가 발생했습니다. 내 응용 프로그램은 하드 코드 된 Ext의 생성되지 않은 HTML 및 CSS 스타일을 많이 사용하며 Ext 구성 요소 (panels, tabpanels 등)에 많이 포함되어 있습니다.이 html은 ext 구성 요소를 포함하는 요소의 자손이므로 분명히 스타일 재설정 CSS. 그리고 결과적으로, Ext가 아닌 HTML의 사용자 정의 스타일을 완전히 끌어 올립니다.구성 요소 내 사용자 정의 HTML에 대한 ExtJS 4의 CSS 다시 설정
.x-border-box .x-reset, .x-border-box .x-reset * {box-sizing: border-box;-moz-box sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;}[/php]
이 속성은 내가했던 일은, 상자 크기 조정을 변경 내 자신의 리셋 래퍼 클래스를 생성했다별로 문제되지 않았습니다 :
는 특히 문제를 일으키는 두 개의 CSS 규칙이 있습니다 다시 'content-box'로 돌아가서이 클래스를 내 사용자 정의 html의 최상위 래퍼 요소에 적용합니다.
.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;}
을 다른 CSS 규칙이 부정 그렇게 간단하지 않습니다 것입니다 그러나 : 다음과 같이 그 규칙은이 규칙이 너무 번잡하다
.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {margin: 0;padding: 0;}
이유는 나의 정의에있는 모든 다른 요소 HTML은 동일한 여백과 패딩을 가지지 않으므로 박스 크기 조정과 같은 방법으로이 스타일을 재정의 할 수는 없습니다. 그리고이 규칙이 대다수의 사용자 정의 CSS 스타일보다 우선하는 이유는 CSS 클래스 자체보다 특수성이 높기 때문입니다. 나는. ".x-reset div"선택기의 여백/패딩 스타일은 '.my-cool-class {padding : 5px; margin : 5px;}'와 같은 규칙보다 우선합니다.
이 문제를 극복하기 위해 자연스럽게 클래스 선택기 앞에 대상 ("div.my-cool-class")의 접두사를 붙이거나 규칙 접두사를 추가하여 규칙을보다 명확하게 지정하도록 사용자 정의 CSS를 업데이트 할 수있었습니다 .x-reset (".x-reset .my-cool-class")을 사용하면됩니다. 그러나 이러한 옵션 중 하나는 파일 크기를 추가하는 것뿐만 아니라 이미 존재하는 많은 커스텀 CSS를 수동으로 업데이트해야합니다. CSS 클래스의 모듈성을 제한합니다.
Ext의 설정을 통해 어떤 방식 으로든 다른 CSS 솔루션을 통해이 문제를 우아하게 해결할 수 있고 지나치게 오버 헤드가 없다는 것을 간과 할뿐입니다.
을 적용합니다 내가 예상했던대로 아주 확실한 해결책을 :) 그 속임수, 고마워! –