Question

我创建了一个在chrome中完美运行的主页，我在firefox中测试，看起来有些div框正在使用我的主内容div来计算它们的百分比高度和宽度而不是直接的父级。因此，div比它们应该大得多。

我试图让小提琴上班，但一直没有成功，它看起来更随机！ FIDDLE

为了确认问题，以下div（runner，runnerBtmLeft runnerBtmRight和runnerRight）使用div main_content来计算它们的百分比大小，而它们应该（并且在chrome中）使用它们的直接父级（容器）。至少这是我可以解决的问题，因为我使用背景颜色来解决firefox认为每个div开始和结束的位置。

有没有办法确保divs 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，以及从百分比到像素的变化完美地工作。但是，我想我改变了位置：相对第一，我可能不需要改变像素

firefox中div百分比大小错误

1 个答案: