파이어 폭스에서 백분율 div 크기가 잘못되었습니다

Question

크롬에서 완벽하게 작동하는 홈페이지를 만들었으며 파이어 폭스에서 테스트 중이며 일부 div 상자는 내 기본 콘텐츠 div를 사용하여 백분율 높이와 너비를 직접 부모. 따라서 div는 반드시 있어야하는 것보다 훨씬 큽니다.

나는 바이올린을 사용하려고 노력하고 있지만 성공하지 못했으며, 더 무작위로 보인다! FIDDLE

은 (그리고 크롬에서 할)해야하는 반면, 문제, (주자, runnerBtmLeft runnerBtmRight 및 runnerRight)이 자신의 비율의 크기를 계산 사업부의 main_content를 사용하는 다음 div의 확인 직접적인 부모 (컨테이너)를 사용합니다. 필자가 파이어 폭스가 각 div를 시작하고 끝내는 곳을 생각하기 위해 배경색을 사용 했으므로 적어도 이것이 내가 할 수있는 일이다.

div runner를 확보하는 방법이 있습니까? runnerBtmLeft runnerBtmRight 및 runnerRight는 부모 div 컨테이너를 사용하여 비율을 계산합니까?

다음은 필요한 코드입니다.

<div id="wrapper"> 
    <!--header and linkbar go here--> 

<div class="outerContainer"> 
<div class="container"> 
    <div class="runner"> 
    </div> 
    <div class="runnerRight"> 
    <h1>Get Involved!</h1> 
    <p>Find out more about Eastbourne Netball League, and how you can be a part of it.</p> 
    </div> 
    <div class="runnerBtmLeft"> 
    <h1>Latest News</h1> 
    <p>Read all about it, the latest news, upcoming events and courses</p> 
    </div> 
    <div class="runnerBtmRight"> 
    <div class="textBox"> 
    <p>Tables and Results</p> 
    </div> 
    <img src="pic5.png"> 
    </div> 
    </div> 
    <div class="btmBanner"> 
    <h1>Team Directory</h1> 
    <p>Club contact info, player lists and training info</p> 
    </div> 
</div> 
<div class="speech"> 
<img src="quotesLeft.png" id="left"> 
<img src="quotesRight.png" id="right"> 
<p>Who doesn't love a good game of netball, eh&#63; </p> 

</div> 
</div> 
<footer id="mainFooter"> 
<!--footer info here--> 
</footer> 
</div> 
</body> 
</html> 

와 CSS

...

runnerRight{width:49.5% ; height: 49.5%; position: absolute ; right:0 ; top: 0 ; 
display: inline-block ; border-radius: 40pt ; - 
webkit-box-shadow: 0 0 10pt grey ; 
-moz-box-shadow: 0 0 10pt grey ; box-shadow: 0 0 10pt grey} 

.runnerRight {background-image: -webkit-linear-gradient 
(bottom left, #D0A9F5 10%, #BE81F7 100%) ; 
background-image:-moz-linear-gradient(bottom left, #D0A9F5 10%, #BE81F7 100%) ; 
background-image: linear-gradient(bottom left, #D0A9F5 10%, #BE81F7 100%)} 

.runnerRight h1 {text-align:center ; color:white ; text-shadow: 0 1px 0 #A4A4A4 
; font-size: 44pt ; font-family: century gothic, sans-serif} 
.runnerRight p {text-align:center ; font-size: 20pt ; 
font-family: century gothic, sans-serif} 

.runnerBtmLeft{width:49.5% ; height: 49.5%; position: absolute ; left:0 ; bottom: 0 ; 
display: inline-block ; border-radius: 40pt ; 
-webkit-box-shadow: 0 0 10pt grey ; -moz-box-shadow: 0 0 10pt grey ; 
box-shadow: 0 0 10pt grey} 

.runnerBtmLeft {background-image: -webkit-linear-gradient 
(bottom left, #D0A9F5 10%,#BE81F7 100%) ; 
background-image:-moz-linear-gradient(bottom left, #D0A9F5 10%, #BE81F7 100%) ; 
background-image: linear-gradient(bottom left, #D0A9F5 10%, #BE81F7 100%)} 

.runnerBtmLeft h1 {text-align:center ; color:white ; 
text-shadow: 0 1px 0 #A4A4A4 ;font-size: 44pt ; 
font-family: century gothic, sans-serif} 
.runnerBtmLeft p {text-align:center ; font-size: 20pt ; 
font-family: century gothic,  sans-serif} 

.runnerBtmRight {position: absolute ; bottom:0 ; right: 0 ; 
width: 49.5% ; height: 49.5% ; border-radius: 40pt ; 
-webkit-box-shadow: 0 0 10pt grey ; 

-moz-box-shadow: 0 0 10pt grey ; box-shadow: 0 0 10pt grey ; 
overflow:hidden ; background: white} 
.runnerBtmRight img {position: absolute ; top: 13%} 

.runnerBtmRight .textBox {background: black ; width: 100% ; 
height: 20% ; overflow: hidden ; position: absolute ; bottom: 0 ; 
opacity: 0.7} 
.runnerBtmRight .textBox p {color: white ; text-align:center ; 
font-size: 20pt ; font-family: century gothic, sans-serif} 

.outerContainer .btmBanner {width:998px ; height: 197px ; 
position:relative ; bottom:1em ; background:purple ; opacity: 0.4 ; 
color:white ; text-align:center ; border-radius: 40pt} 
.outerContainer .btmBanner h1 {padding-top:0.8em ; font-size: 28pt ; 
font-family:century gothic, sans-serif} 
.outerContainer .btmBanner p {font-size:20pt ; 
font-family: century gothic, sans-serif} 

footer#mainFooter {padding-bottom: 2em ; padding-top: 0.5em ; 
text-align:center ; background:black ; opacity: 0.7 ; color: white ; 
width: 100% ; margin-top: 20em ; position:  
relative ; bottom: 0 ; font-family: century gothic, sans-serif} 
footer#mainFooter h1 {font-size:20pt} 
footer#mainFooter p {font-size: 14pt} 

.speech {margin-left:10% ; margin-right: auto ; 
width:40% ; height: 100% ; position:relative} 
.speech p {text-align:center ; padding:0.5em 0.5em 0.5em 1.5em ; 
color:navy ; font-size: 26pt ; font-family: century gothic, sans-serif } 
.speech #left {position: absolute ; top:0.5em ; left:0.5em} 
.speech #right {position: absolute ; bottom: 0.5em ; right: 0.5em} 

Answer 1

것은 해결. 위치 추가 : 컨테이너 div를 기준으로 백분율에서 픽셀로 완벽하게 변경되었습니다. 그러나, 나는 상대방의 위치를 ​​바꾸 었다고 상상한다 : 상대적으로 먼저, 나는 픽셀로 바꿀 필요가 없을지도 모른다.