HTML和SVG上漿問題

HTML

<div class="row"> 
    <div class="cell">1234</div> 
    <div class="cell">5678</div> 
</div> 

<div class="row"> 
    <div class="cell">1234</div> 
    <div class="cell"><div><svg width="100%" height="100%"></svg></div></div> 
</div>

CSS

.row { 
    display: table-row; 
    background-color: #DADADA; 
} 

.cell { 
    display: table-cell; 
    width: 50px; 
    height: 25px; 
}

FIDDLE

你能告訴米e爲什麼svg單元格的行高於25px？

注意

的svg由庫渲染，所以我不能設置它的高度。

來源

2014-09-23 Levi

你有不同的代碼在這裏和你的jsfiddle不同的代碼 – 2014-09-23 06:31:02

這兩個版本的代碼的問題是相同的。 – Levi 2014-09-23 06:39:15

嗯，你澄清的問題是與你的兩個代碼，這樣以來SVG是默認的inline元素，你需要使用vertical-align: top;序擺脫height干擾..

svg { 
    vertical-align: top; 
}

Demo

如果您將id指定給您的svg元素並相應地修改您的選擇器會更好。

來源

2014-09-23 06:42:17

你有兩個問題。

SVG是在對方的回答說明一個內聯元素，這可以通過給SVG一個vertical-align: top風格來解決。
<svg>位於沒有寬度/高度樣式的內部<div>元素中。 <div>將根據其內容大小進行調整，但其內容是一個svg元素，其大小爲其容器的大小。結果應該是單元格大小爲它在Firefox中執行的後退300 x 150寬度/高度。

來源

2014-09-23 06:57:39

HTML和SVG上漿問題

回答

相關問題