방화범이 바뀌는 동일한 CSS?

Question

CSS :

.list-a .desc-fix { 
    width: 180px; 
    margin: 0px auto; 
    position: relative; 
} 
.list-a .desc { 
    background: url("../images/trans_black.png") repeat; 
    display: block; 
    font-family: arial; 
    font-size: small; 
    height: 18px; 
    margin: 3px 0 0 50px; 
    overflow: hidden; 
    padding: 10px; 
    position: absolute; 
    width: 180px; 
    z-index: 3; 
    right:30px; 
    left:30px 
} 

HTML :

이

<span class="desc-fix"> 
    <span class="desc"> 
     <h4>Text A</h4> 
     <h5>Text B</h5> 
    Long text long text long text Long text long text long text Long text long text long text Long text long text long text Long text long text long textLong text long text long text Long text long text long text 
    </span> 
</span> 

위가 중앙에 정렬 절대 위치 범위를 정렬 내 코드입니다.

하지만 페이지를로드 할 때 중간에 정렬되지 않았습니다.

(내가 실제로 생각한대로) CSS를 변경하고 Firebug를 통해 원본 값으로 다시 변경하면 중간에 정렬됩니다. 어떤 생각이 든, 무슨 일 이니?

Answer 1

당신이 클래스 내에서 그 범위를 포장, 아래의 코드를 사용해 볼 수주십시오. 이것을 확인하십시오 JSFiddle

.list-a .desc-fix { 
    width: 100%; 
    height: 100%; 
} 
.list-a .desc { 
    background: url("../images/trans_black.png") repeat; 
    display: block; 
    font-family: arial; 
    font-size: small; 
    margin: 3px 0 0 50px; 
    padding: 10px; 
    max-width:300px; 
    max-heigtht: 400px; 
    width: 100%; 
    height: 100%; 
} 
.list-a { 
    width:300px; 
    height:400px; 
    margin: 0px auto; 
} 

Answer 2

당신은 항상 직접 부모에게 당신의 CSS 클래스를 연결해야합니다, 예를 들면 : 다른 브라우저에서

.list-a span .desc-fix {) 
.list-a span .desc {) 

또는 단순히

span .desc-fix {} 
span .desc {} 

가 작동 하는가를?

편집 :이 소용돌이 https://stackoverflow.com/a/7720742/2516336