某些元素在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"属性来解决此问题，然后它将正确呈现。