Firefox CSS 개요 버그?

Question

크롬과 IE9에서 내가 지정한 정확하게 CSS 윤곽선은 내가 원하는 것을 정확히 수행하고, 스타일을 지정하는 요소 주위의 두 번째 테두리 역할을합니다.

그러나 Firefox에서는 외곽선이 확장되어 기본 요소뿐 아니라 생성 한 :: after 의사 요소를 포함합니다.

이 버그입니까? 그것에 대한 좋은/쉬운/깨끗한 해결 방법은 무엇입니까? 가능한 경우 추가 마크 업을 추가하지 않는 것이 좋습니다.

Answer 1

그래, 파이어 폭스에서 버그 (sorta)처럼 보입니다. here. 이제 어떤 사람들은 아이들이 절대적이든 아니든 예상된다면 논쟁하는 듯하다. 또는 윤곽선이 '모든 것'을 포함해야한다고 주장하는 것 같다. 다소 이상한 것이지 전혀 예상되는 행동이 아니며, 적어도 position: absolute을 사용할 때 나를.

해결책 1 : .main 클래스

• 일 당신에게 여분의 의사 선택과 방법, (나는 당신이 그와 함께 갈 수 있도록 당신이 :before 클래스를 사용하지 않는 참조), 그리고 작업 그곳에서부터, 전체적으로 잘 작동하는 것처럼 보입니다.
• demo here 체크 아웃 또는 조각

.main { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px auto; 
 
    border: 2px solid #f00; 
 
} 
 
.main:before { 
 
    content: ''; 
 
    position: absolute; 
 
    border: 2px solid #00f; 
 
    /*adjust if needed if using border-box*/ 
 
    top: -4px; 
 
    right: -4px; 
 
    bottom: -4px; 
 
    left: -4px; 
 
    z-index: -1; 
 
} 
 
.main:after { 
 
    content: 'Hello'; 
 
    position: absolute; 
 
    width: 100px; 
 
    text-align: center; 
 
    bottom: -50px; 
 
} 
 
.wtf { 
 
    width: 400px; 
 
    margin: 90px auto; 
 
}

<div class="main"></div> 
 
<div class="wtf"> 
 
    <p>In Chrome and Safari the 'Hello' is outside of the outline.</p> 
 
    <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p> 
 
</div>

울부 짖는 해결 방법 2 :

• 사용 상자 - 그림자 소품. 추가없이 그 효과를 달성하기 위해 : 의사 선택기
• 체크 아웃 demo here 또는

.main { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px auto; 
 
    border: 2px solid #f00; 
 
    box-shadow: 0 0 0 2px #00f; 
 
} 
 
.main:after { 
 
    content: 'Hello'; 
 
    position: absolute; 
 
    width: 100px; 
 
    text-align: center; 
 
    bottom: -50px; 
 
} 
 
.wtf { 
 
    width: 400px; 
 
    margin: 90px auto; 
 
}

<div class="main"></div> 
 
<div class="wtf"> 
 
    <p>In Chrome and Safari the 'Hello' is outside of the outline.</p> 
 
    <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p> 
 
</div>