`顯示：內聯block`在IE10

不工作

我有一個水平滾動圖像列表：`顯示：內聯block`在IE10

<ul> 
    <li><img src="..."/></li> 
    <li><img src="..."/></li> 
</ul>

我設置li的是inline-block，並有height: 100%：

ul { 
    height: 100%; 
    white-space: nowrap; 
} 
li { 
    height: 100%; 
    display: inline-block; 
} 
img { 
    height: 100%; 
    width: auto; 
}

這似乎適用於我在我的Macbook上運行的所有瀏覽器。但它未能在IE10上工作。

在IE10中，li被正確定位在一個接一個之後，但它們的寬度不適應圖像的寬度（這是動態的，因爲它遵循瀏覽器高度）。相反，它們具有全尺寸圖像的寬度。

我認爲在li上設置inline-block應該讓它們適應它們的內容，但顯然IE10並非如此。

我能做些什麼來解決這個問題？

網站的開發人員版是在網上：http://clients-are-heroes.jackietreehorn.be/tombubbe/project/flor/

來源

2016-01-25 romeovs

這種方法似乎還有其他問題;從一個大約是屏幕寬度50％的瀏覽器窗口開始。加載你的頁面，然後最大化窗口。我注意到Chrome並未修復佈局。 – Sampson

由於該站點現在正在使用，因此除Microsoft Edge以外的瀏覽器也存在問題。例如，如果您從較小的Chrome窗口開始，加載頁面，然後最大化窗口，您會注意到Chrome無法正確調整圖像大小。這並不理想。

在花費了一些時間研究Chrome和Microsoft Edge之間的問題後，我發現瀏覽器並不是很好的調整容器的大小，因爲這些容器內部的圖像不是自然的尺寸。幾乎所有我測試過的瀏覽器都在這裏以某種方式失敗。

我考慮的一種潛在變通方法是在容器上使用display: table，在內容元素上使用display: table-cell的值。如果您的圖像大小相同，但是第二張圖像的大小約爲第一張和第三張的大小的200％，則這會起作用，這會導致所得佈局的大小不規則。

由於您提出了Internet Explorer 10的基準瀏覽器支持，因此對我們而言，flexbox可能是一種可靠的替代方案。它很簡潔，在IE 10中得到了很大程度的支持，並且產生更一致的輸出。

.container { 
 
    display: flex; 
 
    overflow-x: scroll; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    bottom: 0; right: 0; 
 
} 
 
    section { 
 
    min-width: 496px; 
 
    box-sizing: border-box; 
 
    } 
 
    img { 
 
     height: 100%; 
 
    }

<div class="container"> 
 
    <section> 
 
    <p>weekendwoning aan een meer</p> 
 
    <p>Deze vakantiewoning is gel...</p> 
 
    <p>Het ontwerp evolueerde van...</p> 
 
    <p>De woning bestaat uit een...</p> 
 
    </section> 
 
    <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/foto-1.jpg" alt=""> 
 
    <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/beeld2.jpg" alt=""> 
 
    <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/DSC0014-waterkant-rechts.jpg" alt=""> 
 
</div>

這種做法，同時在很大程度上令人滿意，仍然有兩個缺點：

鉻需要height: 100%對精確尺寸圖像
Internet Explorer不處理窗口調整大小的所有那個

儘管存在這些缺陷，Chrome，Firefox，Internet Explorer和Edge都會產生相同的輸出。

您的原始方法在Microsoft Edge和Google Chrome之間顯示a couple of interop differences。由於這個原因，我將爲Edge團隊打開一個錯誤來進一步調查差異。

來源

2016-01-25 21:29:29 Sampson

哇，你放了很多工作！我將很快進行測試（明天 - 伊斯）。非常感謝！ – romeovs

嘗試給一個width: auto到li標籤。然後，將帳戶邊距自動放置在inline-block元素上。

來源

2016-01-25 20:21:31

`顯示：內聯block`在IE10

回答

相關問題