Firefox中绝对定位的div的宽度不等于子图像的宽度问题答案

【问题标题】：Absolute positioned div's width not equal to child image's width issue in firefoxFirefox中绝对定位的div的宽度不等于子图像的宽度问题
【发布时间】：2016-07-29 06:34:47
【问题描述】：

我在其中绝对定位了 div 和图像。问题是在 Firefox 中，partent div 的宽度大于子图像。在chorme，即看起来不错。任何人都可以帮忙吗？这里是 link。向下滚动并查看左侧的地图。

这里是html

<div class="rm">
      <img src="images/ride_map.jpg" alt="ride map" class="img-responsive center-block" />
      <div class="path"><img src="images/path1.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path2"><img src="images/path2.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path3"><img src="images/path3.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path4"><img src="images/path4.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path5"><img src="images/path5.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path6"><img src="images/path6.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path7"><img src="images/path7.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path8"><img src="images/path8.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path9"><img src="images/path9.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      <div class="path10"><img src="images/path10.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
      </div>

这里是css

    /*day1*/

.path {
    position: absolute;
    bottom: 4.8%;
    left: 23.4%;
    height: 22.6%;
}
.path img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day2*/

.path2 {
    position: absolute;
    bottom: 4.7%;
    left: 43%;
    height: 13.5%;
}
.path2 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day3*/

.path3 {
    position: absolute;
    bottom: 16.5%;
    right: 11.7%;
    height: 13%;
}
.path3 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day4*/

.path4 {
    position: absolute;
    bottom: 27.5%;
    right: 12%;
    height: 21%;
}
.path4 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day5*/

.path5 {
    position: absolute;
    right: 17.7%;
    bottom: 46.8%;
    height: 21%;
}
.path5 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day6*/

.path6 {
    position: absolute;
    right: 33.5%;
    top: 18%;
    height: 16%;
}
.path6 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day7*/

.path7 {
    position: absolute;
    left: 24.5%;
    top: 9%;
    height: 10.6%;
}
.path7 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day8*/

.path8 {
    position: absolute;
    left: 24.2%;
    top: 9.1%;
    height: 26%;
}
.path8 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day9*/

.path9 {
    position: absolute;
    left: 22%;
    top: 33.5%;
    height: 34%;
}
.path9 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}
/*day10*/

.path10 {
    position: absolute;
    left: 23.3%;
    top: 65.5%;
    height: 9%;
}
.path10 img {
    padding: 0 !important;
    background: transparent !important;
    height: 100%;
}

【问题讨论】：

在 Firefox 和 Chrome 中对我来说看起来是一样的。你检查的是哪个版本的 Firefox？
我添加了宽度属性，现在可以了。谢谢。

标签： html css firefox css-position

【解决方案1】：

我必须为路径添加宽度属性，之后它就可以正常工作了。

/*day1*/
.path {
    position: absolute;
    bottom:4.8%;
    left: 23.4%;
    height: 22.6%;
    width: 22%;
}
.path img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day2*/
.path2 {
    position: absolute;
    bottom: 4.7%;
    left: 43%;
    height: 13.5%;
    width: 29%;

}
.path2 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day3*/
.path3 {
    position: absolute;
    bottom: 16.5%;
    right: 11.7%;
    height: 13%;width: 20%;

}
.path3 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day4*/
.path4  {
    position: absolute;
    bottom: 27.5%;
    right: 12%;
    height: 21%;width: 8%;

}
.path4 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day5*/
.path5 {
    position: absolute;
    right: 17.7%;
    bottom: 46.8%;
    height: 21%;width: 18.78%;
}
.path5 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day6*/
.path6 {
    position: absolute;
    right: 33.5%;
    top: 18%;
    height: 16%;width: 16%;

}
.path6 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day7*/
.path7 {
        position: absolute;
    left: 24.5%;
    top: 9%;
    height: 10.6%;width: 28.55%;



}
.path7 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day8*/
.path8 {
    position: absolute;
    left: 24.2%;
    top: 9.1%;
    height: 26%;width: 7.8%;

}
.path8 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day9*/
.path9 {
position: absolute;
    left: 22%;
    top: 33.5%;
    height: 34%;width: 5%;


}
.path9 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day10*/
.path10 {
     position: absolute;
    left: 23.3%;
    top: 65.5%;
    height: 9%;
    width: 3%;
}
.path10 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

【讨论】：