在IE中的svg圖像的CSS表格佈局高度

看一下下面的代碼和小提琴，可以請告訴我爲什麼在IE瀏覽器（9-10-11）svg圖像的高度不匹配高度兄弟姐妹（正確的內容）像鉻，FF，Safari？在IE中的svg圖像的CSS表格佈局高度

在IE中左側表格中有額外的垂直空間。

感謝信

HTML

<div class="table-layout"> 
     <div class="table-cell fixed-width"> 
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180.22 150.718" enable-background="new 0 0 180.22 150.718" xml:space="preserve"> 
       <circle fill="#E3E3E3" cx="91.5" cy="75.167" r="75.167" /> 
      </svg> 
     </div> 
     <div class="table-cell" style="border: solid red 1px"> 
     <div class="row"> 
      <div class="col-xs-12">content</div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-6"> 
       <div class="row"> 
        <div class="col-sm-6">content</div> 
        <div class="col-sm-6">content</div> 
       </div> 
      </div> 
      <div class="col-lg-6">content</div> 
     </div> 
    </div>

CSS

.table-layout { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    } 
    .table-layout .table-cell { 
    display: table-cell; 
    border: solid 1px #ccc; 
    vertical-align: top; 
    } 
    .fixed-width { 
    vertical-align: middle !important; 
    background-color: #a3a3a3; 
    width: 60px; 
    padding: 5px; 
    }

小提琴：http://jsfiddle.net/gp2nqzh0/1/

來源

2014-12-05 Thibs

刪除width:100%;從.table-layout，它會正常工作。

來源

2014-12-05 04:58:09

感謝您的回覆。我確實看到svg高度是固定的，但這不起作用，因爲右側的內容必須進行縮放並做出響應 – Thibs 2014-12-05 14:32:02

這是一箇舊帖子，但仍然相關。

對於那些沒有IE瀏覽器（希望最多）或者模擬器並希望看到問題的用戶，我附上了截圖。

修復：一套既您svg元素的高度和寬度。

.fixed-width svg { 
    width: 60px; 
    height: 60px; 
}

我使用Browserstack在IE 11上測試了你的小提琴，並且可以確認它的工作原理。設置max-width和max-height屬性也起作用。

爲什麼會發生這種情況？

我推薦閱讀本文以充分理解瀏覽器中svgs的行爲：https://css-tricks.com/scale-svg/ BONUS：這也適用於許多場景。

但這種情況下，你的回答下面的（文章），

許多瀏覽器，IE，Safari和Opera和Chrome的版本之前的2014年夏季，不會自動尺寸在線發佈SVG。如果您不指定高度和寬度，則這些瀏覽器將應用其通常的默認大小，如前所述，這對於不同的瀏覽器會有所不同。圖像將縮放以適應該高度或寬度，並在其周圍留下額外的空白。同樣，如果您將高度和寬度都保留爲auto，那麼會發生什麼不一致。

Internet Explorer削減差異，使用100％的寬度和150像素的高度對圖像和內聯SVG。

因爲你有你的DIV一個fixed-width類，我想你不必擔心可擴展性和設置在SVG的固定寬度和高度就足夠了。

來源

2017-12-13 17:29:09 jmils

在IE中的svg圖像的CSS表格佈局高度

回答

相關問題