在IE，Chrome，Safari中顯示的位置絕對不可見的IMG - 爲什麼？

以下類別爲slide的元素應在CSS中保持由padding-bottom:44%;控制的固定高寬比。內部元素（帶有類slide的圖像）應裁剪以適應盒子，同時縮放至100％寬度。在IE，Chrome，Safari中顯示的位置絕對不可見的IMG - 爲什麼？

現在我的問題是，這在Chrome瀏覽器，Safari瀏覽器，甚至IE瀏覽器工作正常，但在Firefox它根本不會顯示。這是爲什麼？

我的HTML：

<header class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide"> 
      <img class="slide" src="https://cranmoremtlodge.files.wordpress.com/2008/09/fall-foliage-003.jpg" /> 
     </div> 
</header>

我的CSS：

/*these two are mine*/ 
.swiper-slide { 
    width: 1664px; /*assigned as element style by swiper*/ 
    position:relative; 
    padding-bottom:44%; 
    overflow: hidden; 
} 
.swiper-slide .slide { 
    position:absolute; 
    top:-50%; bottom:-50%; 
    margin:auto; 
    width: 100%; 
    height: auto; 
    background: teal; 
} 

/*these three come with www.idangero.us/swiper/ */ 
.swiper-wrapper { 
    box-sizing: content-box; 
    display: flex; 
    height: 100%; 
    position: relative; 
    transition-property: transform; 
    width: 100%; 
    z-index: 1; 
} 
.swiper-container { 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    z-index: 1; 
} 
.swiper-slide { 
    flex-shrink: 0; 
    height: 100%; 
}

小提琴：https://jsfiddle.net/smauo1wu/5/

來源

2015-12-09 C.O.

你有很多在你的代碼怎麼回事，有一些是造成問題。例如，你不遵守CSS rule for percentage heights。此外，您在.swiper-slide .slide中的絕對定位看起來並不必要，並且在重新調整大小時（當其他問題得到解決時）將圖像推送到屏幕外。

無論如何，這裏有一些修改後的代碼可以幫助你。圖像現在出現並在所有瀏覽器中擴展（在Chrome，FF和IE11中測試）。

HTML（無變化）

修訂CSS

html, body { height: 100%; } /* NEW */ 

.swiper-container { 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    z-index: 1; 
    height: 100%; /* NEW */ 
} 

.swiper-wrapper { 
    box-sizing: content-box; 
    display: flex; 
    height: 100%; 
    position: relative; 
    transition-property: transform; 
    width: 100%; 
    z-index: 1; 
} 

.swiper-slide { 
    width: 1664px; 
    position:relative; 
    padding-bottom:44%; 
    overflow: hidden; 
    height: 100%; /* NEW */ 
    width: 100%; 
} 

.swiper-slide .slide { 
    width: 100%; 
    height: auto; 
    background: teal; 
}

DEMO

來源

2015-12-10 00:08:17

非常感謝。漫長的一天... –

在IE，Chrome，Safari中顯示的位置絕對不可見的IMG - 爲什麼？

回答

相關問題