内容溢出div

Question

我在Firefox上遇到了问题（在Chrome和Safari上都没有）。我显示的内容如下所示在div之外：

这是我在Chrome上获得的：它非常适合父母div

这是html：

<div style="vertical-align:top; display:inline;" class="buttons">
  <button id="b1">RDC Bas</button>
  <button id="b2" >RDC Haut</button>
</div>
<div id="plan-boutiques" class="boxes">
  <div id="first">
    <img src="img/rdc_bas.png" alt="">
    <a href="" id="carrefour"><p>7</p></a>
    <!-- a link continues -->
  </div>

  <div id="sec" style="display: none;">
    <img src="img/rdc_haut.png" alt="">
    <a href="" id="recre"><p>8</p></a>
    <!-- a link continues -->
  </div>

</div>

CSS：

#plan-boutiques a {
    background-color: red;
    border-radius: 100px;
    background-repeat: no-repeat;
    display: block;
    height: 26px;
    width: 26px;
    position: absolute;
    line-height: 25px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    background-position: 0 -27px;
}

#plan-boutiques {
    display: inline-block;
    position: relative;
}
#plan-boutiques > img {
    width: 100%;
    height: auto;
    max-width: 676px;
    max-height: 507px;
}

a#carrefour {
    margin-left: 56.92%;
    margin-top: -32.02%;
}
a#recre {
    margin-left: 23.92%;
    margin-top: -50.02%;
}
.boxes, .buttons{
    float: left;
}   
#b1, #b2 {
    height: auto;
    width: 336px;
    max-height: 30px;
}

因为它是Joomla中的一篇文章我不想修改父div，我只想修改我构建的内容！

Answer 1

你必须改变：

#plan-boutiques > img { ... }

要：

#plan-boutiques img { ... }

由于图片不是#plan-boutiques的直接孩子。