위치 절대 절대 firefox 12 +

에서 pseudo 요소에서 작동하지 않습니다. firefox 12+ (어쩌면 이전)에서 의사 요소에 위치에 문제가 있습니다. 요소는 페이지에 상대적으로 보이지만 앵커 태그에 position:relative이 있습니다. 어떤 제안?위치 절대 절대 firefox 12 +

HTML

<a href="http://localhost:8888/wordpress/test-file/Test-File/" rel="attachment wp-att-150">Test File</a>

CSS

a[rel~="attachment"] { 
    display: inline-block; 
    position: relative; 
    background: #EAE3EA; 
    height: 64px; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border-radius: 7px; 
    -khtml-border-radius: 7px; 
    border: 3px solid #515151; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    padding: 0 5px 0 47px; 
    font-weight: 400; 
} 

a[rel~="attachment"]::before { 
    content: ''; 
    background: url(img/file.png) no-repeat; 
    width: 37px; 
    height: 48px; 
    top: 5px; 
    left: 5px; 
    position: absolute; 
}

출처

2012-12-31 George

다른 브라우저에서도 작동합니까? –

않습니다.

출처

2012-12-31 00:38:22

도와 줘서 고마워요. – George

이 사이트에서 편집보다는 투표 옆에있는 체크 표시를 눌러 답을 수락 할 수 있습니다 ~ [해결];) –

당신은

으로

display: inline-block;

을 덮어 어쩌면 디스플레이 인라인 블록을 사용

display: table-cell

는 a::before 마음에 당신이 요소의 위치 제어의 많음이있다, 그래서 당신은 부정적인 여백을 사용할 수 있습니다 유지의 위치를 대신 여백을 사용할 수있는 상대 위치를 사용하는 트릭을

출처

2012-12-31 00:27:35

고마워요. 결국 답을 사용하지 않았지만 중복을 지적 해 주셔서 감사합니다. – George

위치 절대 절대 firefox 12 +

답변

관련 문제