кроссбраузерная верстка (opera, firefox)

200

30 мая 2018, 23:00

.man{ 
	position: absolute; 
	bottom: -1837px; 
	left: -30px; 
} 
.manCool img{ 
	position: absolute; 
	right: -10px; 
	bottom: -1884px; 
	z-index: 1; 
} 
/*Opera*/ 
/*@media all and (min-width:0px) { 
.man {  
    position: absolute; 
	bottom: -1884px; 
	left: -10px;  
} 
 
.manCool{ 
	position: absolute; 
	right: -40px; 
	bottom: -1884px; 
	 
} 
}*/ 
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { 
.man {  
    position: absolute; 
	bottom: -1884px; 
	left: -10px;  
} 
 
.manCool img{ 
	position: absolute; 
	right: -40px; 
	bottom: -10px; 
	/*z-index: 1;*/ 
} 
} 
/*Chrome и Safari*/ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .man{ 
	position: absolute; 
	bottom: -1820px; 
	left: -30px; 
} 
.manCool img{ 
	position: absolute; 
	right: 0px; 
	bottom: -1820px; 
	z-index: 1; 
} 
   
} 
 
@-moz-document url-prefix() { 
   .man{ 
	position: absolute; 
	bottom: -1821px; 
	left: -30px; 
} 
.manCool img{ 
	position: absolute; 
	right: -9px; 
	bottom: -1821px; 
	z-index: 1; 
} 
   
}

<section> 
	<div class="man"><img src="img/manBad.jpg"></div> 
  <div class="manCool"><img src="img/manCool.jpg"></div> 
</section> 
<section id="six"> 
</section>

Ребята, в хроме все на своих местах, а вот в опере и firefox картинки съезжают.как исправить ситуацию? прописывать код в js для браузеров? или можно как-то зафиксировать картинки так что бы не пользоваться кроссбраузерностью как вирант.. подскажите!

Answer 1

Задайте контейнеру position: relative; а изображению position: absolute; box-sizing: border-box;