>

FireFox Quantum에서 이상한 동작을 우연히 발견했습니다. 여기서 div의 개요는 절대 위치 자식 div로 확장 가능한 것 같습니다.

<div id="outer-div">
  <div id="inner-div">
    <div id="terrible-expander"></div>
    hello outline
  </div>
</div>
#outer-div {
  background-color: gray;
}
#inner-div {
  background-color: green;
  box-sizing: border-box;
  width: calc(100% - 20px);
  position: relative;
  outline: 2px solid red;
  outline-offset: -2px;
  vertical-align: baseline;
  margin-left: 20px;
}
#terrible-expander {
  height: 20px;
  width: 3px;
  background-color: blue;
  position: absolute;
  left: -20px;
}

이 예제는 Chrome에서 예상대로 보입니다 :

Quantum에서 엉망이되었습니다 (IMO) :

다음은 fiddle

입니다.

내 질문

이 경우 FireFox Quantum의 동작을 Chrome의 동작에 맞추는 방법이 있습니까?

  • 답변 # 1

    이 문제를 해결 했으므로 position: relative; 속성을 이동하여 두 브라우저가 동일하게 작동합니다.   #inner-div 에서   #outer-div 로 . 일하는 피들입니다

  • 이전 linux - 디렉토리에 특정 확장자를 가진 파일을 인쇄하는 방법은 무엇입니까?
  • 다음 ios - 데이터 소스를 변경할 때 UICollectionView의 부드러운 애니메이션