CSS 속성 중복 문제

Question

좋은 날,

나는 다음과 같은 항목이 외부 스타일 시트가 있습니다

#data-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding-bottom: 26px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

을 그리고 IE와 파이어 폭스하지만 크롬에서 잘 작동합니다. (나는 Safari에 대해 걱정할 필요가 없다).

은 내가 사용할 수있는 발견 : 그것은 크롬 (사파리)에서 작동되도록에만 화면이 그것을 해결하기 위해 @media, 그래서 같은 다른 항목이 있습니다

@media only screen and (-webkit-min-device-pixel-ratio: 0) { 
    #data-container { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     padding-bottom: 14px; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box;   
    } 
} 

지금은 크롬 등 작동을 아주 좋아. 내 관심사는 내가 관심있는 유일한 속성은 안쪽 여백입니다. 그리고 기본적으로 @media 전용 화면 아래의 # 데이터 컨테이너에 대해 다른 모든 속성을 사용해야한다고 생각하지 않습니다. 이전과.

중복 된 항목 (위치, 위, 아래 등)을 제거 할 수있는 방법이 있습니까? @ media only 화면 아래의 패딩 하단을 제외하고 는요?

TIA,

coson

Answer 1

예는 CSS (따라서 C) 연계된다. 그냥 당신이 미디어 쿼리 내에서 오버라이드 (override) 할 규칙을 배치 : 당신이 개발자 도구를 사용하여 요소를 검사하는 경우

#data-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding-bottom: 26px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 0) { 
    #data-container { 
     padding-bottom: 14px; 

    } 
} 

jsFiddle Demo

, 당신은 #data-container은 CSS 규칙의 스타일을 상속하는 것을 볼 수 있습니다,하지만 그 padding-bottom은 미디어 쿼리가 적용되므로 덮어 씁니다. 다음은 Chrome에서 생성 된 스타일입니다. 예 :

@media only screen and (-webkit-min-device-pixel-ratio: 0) 
#data-container { 
    padding-bottom: 14px; 
} 
#data-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding-bottom: 26px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}