Css firefox中的div大小百分比错误

我已经创建了一个在chrome上运行完美的主页，我正在firefox上测试，似乎一些div框正在使用我的主内容div来计算它们相对于直接父项的高度和宽度百分比。因此，div比它们应该的要大得多

我正试着让小提琴去工作，但没有成功，它看起来更随机！

为了确认问题，以下div（runner、runnerBtmLeft、runnerBtmRight和runnerBtmRight）正在使用div main_内容计算其百分比大小，而它们应该（在chrome中也是如此）使用其直接父级（容器）。至少这是我能确定的，因为我已经用背景色确定了firefox认为每个div的开始和结束位置

是否有办法确保divs runner、runnerBtmLeft runnerBtmRight和runnerBtmRight使用其父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>

---

解决了。添加位置：相对于容器div，以及从百分比到像素的更改非常有效。然而，我想如果我改变了位置：相对的，首先，我可能不需要改变像素，你的代码和缩进真的很乱。@Lister先生，我想这是无意的，它很乱。我将其从示例中删除以使小提琴工作。如果您的浏览器不是最新的，那么这可能是导致某些异常的原因。请尝试更新它。我使用的是最新版本的firefox，其宽度百分比看起来都像是在Chrome/Mac中被完全破坏的。我在这行的末尾看到了一个

-

，在下一行看到了

webkit box阴影

。如果你纠正了这些，会发生什么？

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}