某些元素在IE中較高

Question

當在IE中檢查我的網站時，某些元素比其他瀏覽器中呈現「更高」 - 看起來沒有什麼共同之處，我可以找到（編輯：事實證明它們都包含svg元素）。就像他們有一個固定的高度，即使他們沒有。

實施例IE：https://ibb.co/gScRD5

在鉻（如預期）：https://ibb.co/bPEOt5

（項目與CSS模塊反應，但我已經總結了真實合併的CSS）

按鈕：

<a href="/kontakta-oss/" className={styles.cta}> 
    Kontakta oss 
    <Svg src={chevronSvg} className={styles.ctaChevron} /> 
</a> 

而且其SCSS：

.cta { 
    margin-top: 1rem; 
    margin-left: 1rem; 
    color: #fff; 
    background: rgba(64, 142, 180, 0.75); 
    fill: #fff; 
    transition: background .1s; 
    padding: 1rem 2rem; 
    display: inline-block; 
} 

.cta-chevron { 
    width: 1rem; 
    vertical-align: middle; 
    display: inline-block; 
    margin-left: 1rem; 
} 

任何幫助表示讚賞。

Answer 1

問題是您的<a>中的<svg>元素。 IE給它一個大約150px的高度，這使得<a>的高度更高。

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    id="Capa_1" 
    viewBox="0 0 238.003 238.003" 
    x="0px" 
    y="0px" 
    xmlns:xml="http://www.w3.org/XML/1998/namespace" 
    xml:space="preserve" 
    version="1.1" 
> 
    ... 
</svg> 

如果打開F12工具在IE和刪除<svg>元素則<a>框大小正確。

IE似乎不能正確推斷SVG的內在高度 - 您可以通過在<svg>元素上添加明確的height="16px"屬性來解決此問題，然後它將正確呈現。