2016-04-08 1 views
0

I абсолютное расположение div и изображения внутри этого. проблема заключается в том, что в firefox ширина partent div больше, чем у ребенка. В chorme и т. Д. Это выглядит хорошо. Кто-нибудь может помочь? здесь находится link. прокрутите вниз и посмотрите на карту слева.Абсолютная располагаемая ширина div, не равная размеру ширины дочернего изображения в firefox

здесь 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%; 
} 
+0

Это выглядит так же, как в Firefox и Chrome. Какую версию Firefox вы проверяете? –

+0

Я добавил атрибут width, и теперь все в порядке. Благодарю. – Sasith

ответ

0

я должен был добавить атрибут ширины в пути, после того, что он работал отлично.

/*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%; 

} 

 Смежные вопросы

  • Нет связанных вопросов^_^