我試圖設計一個div的樣式具有文本和圖形的標題區域。當我添加一個svg元素時，span元素的位置不再是我指定的位置。我將span放在相對位置，以便將其放在頂部。由CSS的定位跨越div的定位
這裏是JS-小提琴：http://jsfiddle.net/fZTm7/3/
我預計第二DIV活脫脫與酒吧先用SVG矩形代替。
我也看到跨度從其預期位置的位移量越來越小，因爲我減小了svg元素的高度。這完全是莫名其妙的。由於我在Chrome和Firefox中看到相同的行爲，我確信有一些css規則正在被破壞。
任何人都可以解釋這一點嗎？
在span和svg上使用float: left。請參閱：http://jsfiddle.net/fZTm7/10/
您可以將vertical-align: top;添加到.panel-hdg類以獲得所需的效果。
爲SVG標記添加float: left屬性將修復對齊問題。你不需要添加.panel-hdg類。
svg{float: left;}
演示：http://jsfiddle.net/fZTm7/27
現在回到上@Logan Serman的回答您的評論： 這是一個經驗法則對任何元素使用float屬性，同時對齊元素並排側彼此。
在你的情況，有SPAN和SVG標籤。 SPAN是一個INLINE元素，並且無處指定SVG的物理行爲方式 - INLINE/BLOCK。所以浮動是唯一需要解決的問題。
雖然浮動內容呈現正確，我的問題仍然沒有答案。你有什麼想法爲什麼奇怪的位置發生？ – PhilM
span默認情況下是內聯元素，並且將與框的基線自身對齊。 – dmc