Webkit/Firefox - 이미지의 절대 위치

H!Webkit/Firefox - 이미지의 절대 위치

웹킷 브라우저 및 파이어 폭스의 일부 요소 위치 지정에 문제가 있습니다.

enter image description here

그러나 파이어 폭스에서

, 그것은 다음과 같습니다 :

enter image description here

코드

내가 원하는처럼 사파리/크롬에서

, 그것은 보인다

HTML

,210

<ul> 
    <li> 
    <div class="img"> 
     <a href="#"> 
     <img src="#" /> 
     <p><span class="circle"><img src="white-circle.png" alt="" /></span></p> 
     </a> 
    </div> 
    </li> 
</ul>

CSS

li { 
    position: relative; 
} 

p { 
    top: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    text-align: center; 
    background-color: black; 
} 

p img { 
    width: 70%; 
    height: 70%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -35%; 
    margin-left: -35%; 
}

거기에 무슨 일이 어떤 생각? Firefox가 position: absolute을 다르게 해석합니까?

출처

2013-01-12 Sven

나는 Firefox에서도 테스트를 마쳤습니다. – ijo

여기에 무례하거나 모욕적이어서 오해하지 마세요. 그러나이 html은 공포, 빈 이미지 태그입니다. 이미지 주변의 P와 스팬? 왜 그 주위에 감싸고있는 div가 당신이 li에게 수업을주지 않는 이유는 무엇입니까? 모든 것이 유익합니다. 브라우저가 제대로 렌더링하지 않는 것은 당연합니다. –

@LeventeNagy 물론 당신이 맞습니다. 그러나 이것은 단지 예일뿐입니다. 아마 지나치게 간소화했을거야. – Sven

Appelyntly, 다른 엉망이 된 CSS 규칙이 거기에있었습니다. 임시 수정으로 나는 Firefox에서 작동하는 해결책을 찾기 위해 this guide을 사용했습니다.
아마 모든 이미지에 영향을주는 규칙 일 수도 있지만 지금은 찾을 수 없습니다.

출처

2013-01-12 17:21:26 Sven

그 스타일을 오버 라이딩하는 것이 중요합니다. – JalalJaberi

당연히 당신이 당신의 노드에주는 더 특별한 스타일은 더 많은 대중 스타일을 오버라이드합니다. 그렇다면 문제가되어서는 안됩니다. – JalalJaberi

절대 위치 지정을 사용하면 파이어 폭스는 항상 크롬과 사파리를 다르게 움직이는 것처럼 보입니다. 내 의견은

p img:{position: relative;}

입니다. 상대 위치는 절대 사용하는 경우에만 괜찮습니다.

행운을 빌어 요.

출처

2013-01-12 17:25:31 Venkat

Webkit/Firefox - 이미지의 절대 위치

답변

관련 문제