div容器高度不能擴展到滿足孩子SVG的高度在IE

我有了它內部的一個SVG的容器DIV：div容器高度不能擴展到滿足孩子SVG的高度在IE

<!DOCTYPE html> 
<body> 
    <div class="container"> 
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="200"> 
    <rect x="0" y="0" width="50" height="200" /> 
    </svg> 
    </div> 
</body>

下面CSS：

svg 
{ 
    width: 100%; 
    height: 100%; 
} 
div.container 
{ 
    width: 100%; 
    background-color: red; 
}

在火狐，鉻等容器div將匹配svg的高度。但IE瀏覽器並非如此（我在IE9中測試過）。從svg樣式塊中刪除寬度/高度：100％可以解決這個問題，但是我需要這些樣式來擴展我的SVG（我在此示例中的jsfiddle的SVG元素中省略了preserveAspectRatio）。

這裏是的jsfiddle： http://jsfiddle.net/Cx5jR/

我在想，我可以使用變焦：1，以強制IE認識到div元素上hasLayout的，但這並沒有工作。

任何想法？

下面是從IE9中渲染效果的截圖 - 注意div（紅色背景）不能在SVG（黑色矩形）高度下縮放。

IE9 bug svg scale bg

來源

2013-02-28 am_

你能提供一個問題的截圖嗎？我不確定我在IE9中看到的是與您相同的問題 - 雖然渲染效果與Chrome中不一樣。另外，如果您事先知道.SVG的高度，爲什麼不設置'height：200px'？ – ASGM 2013-03-03 12:16:10

感謝您的評論，我在這個例子中設置的SVG只是一個虛擬 - 在我的真實例子中，我不知道SVG在加載頁面之後會達到什麼樣的高度和寬度。我使用offsetWidth來獲取寬度（響應佈局），然後從中計算高度。 – 2013-03-03 12:19:28

在這種情況下，行爲的屏幕截圖仍然會有所幫助（我想確保我正在複製該問題）。 – ASGM 2013-03-03 12:21:26

的SVG目前缺乏一個viewBox屬性，這是需要一致的跨瀏覽器的渲染。缺少viewBox，並且將CSS中的width和height設置爲CSS中的100％似乎是問題的根源。

這是一個跨瀏覽器和IE9一致呈現的jsfiddle：http://jsfiddle.net/Cx5jR/3/。

以下內容添加到<svg>標籤： viewBox="0 0 50 200" （起始X座標，起始Y，結束X，結束Y）

而且height和width在CSS的<svg>被刪除。

來源

2013-03-03 12:32:13 ASGM

@am_請讓我們知道這是否真的解決了您的問題。 – abbood 2013-03-03 13:39:59

感謝您的建議！我將在今晚晚些時候嘗試 - 並讓你知道。 – 2013-03-03 14:24:00

添加viewBox後，我發現我並不需要將SVG的高度設置爲100％，以便SVG根據我的響應式佈局進行縮放。如果我使用100％高度，即使我有viewBox，也會發生同樣的問題。然而，添加viewBox和preserveAspectRatio似乎已經解決了我在IE9中的問題。謝謝！ – 2013-03-03 16:06:53

div容器高度不能擴展到滿足孩子SVG的高度在IE

回答

相關問題