1. 首頁
  2. 問答
  3. 最大高度不工作在Internet Explorer中

最大高度不工作在Internet Explorer中

2014-04-09 111 views
0

我有問題使max-height: 100%在IE 10中工作，（也是IE 9）。最大高度不工作在Internet Explorer中

我在StackOverflow中發現了幾個問題，但沒有一個適用於我的情況。 （很多是處理固定大小的包裝）。

我以模式顯示圖像。
我想限制max-size不溢出可見窗口區域。
所以，我沒有任何height: xxxpx，因爲我不希望小圖像被拉伸。
我不會將包裝div設置爲height: 100%，因爲我想調整爲圖像大小。

這是問題的一個小筆畫演示：

<!DOCTYPE html> 
... 
<div id="thumbnail-container"> 
    <img src="http://www.universetoday.com/wp-content/uploads/2008/09/sun_stereo_4dec2006_lrg.jpg"/> 
</div>

CSS

#thumbnail-container img { 
    max-height: 100%; 
}

Demo in fiddle

它可以在瀏覽器，但它不能在IE瀏覽器。 max-width工作正常。

如何在不使用Javascript的情況下完成此項工作？

來源

2014-04-09 Andre Figueiredo

+1

甚至無法在IE8中正確查看JSFiddle：\ – MJoraid

回答

-1

max-height屬性在IE7 +中起作用，但前提是頁面具有標準的DOCTYPE。 嘗試聲明文檔的DOCTYPE。 嘗試其中之一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<!DOCTYPE html>

此外，如果IE是在兼容模式，可能會導致問題。嘗試添加以下到您的文檔<head>：像min-height和max-height，用百分比使用時

<!-- Forces user OUT of IE's compatibility mode and removes "broken page" icon --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

來源

2014-04-09 14:53:16

+0

我正在使用'<！DOCTYPE html>' –

1

屬性，正在申請這一比例作爲父容器的百分比。現在，你沒有父容器，所以這是一個問題。

此外，如果父容器沒有將高度設置爲顯式值，則使用帶有百分比的max-height同樣不起作用。

因此，使用max-height: 100%;的地方，還必須有一個元素的父容器的高度設置爲一個明確的值（即50px有家長設置爲50%將無法​​正常工作，因爲50％是不明確的;它是相對的） 。

來源

2014-04-09 14:53:22 TylerH

+0

因此，不幸的是，我的替代選擇在Javascript中休息嗎？ –

+0

@AndréFigueiredo如果你不想在父容器中設置高度，情況可能就是這樣。 – TylerH

相關問題

 相關問題