Html 在IE中以零宽度和零高度渲染的svg图像

我创建了一个ReactJS组件，用于在数据表的每一行中显示编辑/删除按钮

这是我的组件：

import React from 'react';

const iconStyle = {
    border:'none',
    boxShadow:'none',
    backgroundColor:'transparent',
    cursor:'pointer'

};


const RowEditButtons = (props) => {
    const editButton = props.onEdit ?
        <button type="button" className="btn btn-sm btn-secondary" onClick={props.onEdit.bind(null,props.index)} style={iconStyle}>
            <img src="img/icon-pencil.svg" />
        </button>
            : null;
    const deleteButton = props.onDelete ? 
        <button type="button" className="btn btn-sm btn-secondary" onClick={props.onDelete.bind(null,props.index)} style={iconStyle}>
            <img src="img/close-o.svg" />
        </button>
            : null;

    return (
        <div className="btn-group" role="group" aria-label="Edit buttons" >
            {editButton}
            {deleteButton}
        </div>
    );

};

RowEditButtons.propTypes = {
    index: React.PropTypes.number,
    onEdit: React.PropTypes.func,
    onDelete: React.PropTypes.func
};

export default RowEditButtons;

从“React”导入React；
常数iconStyle={
边界：'无'，
boxShadow:“无”，
背景颜色：'透明'，
光标：'指针'
};
常量行编辑按钮=（道具）=>{
const editButton=props.onEdit？
：null；
const deleteButton=props.onDelete？
：null；
返回(
{editButton}
{deleteButton}
);
};
RowEditButtons.propTypes={
索引：React.PropTypes.number，
OneEdit:React.PropTypes.func，
onDelete:React.PropTypes.func
};
导出默认行编辑按钮；

我正在测试IE（因为这是公司的标准），我注意到有时候按钮会出现，有时候不会。有时它们会显示在某些行上，而不会显示在其他行上。这是不一致的。使用dev工具查看渲染的DOM后，我看到按钮和图像都在那里，只有图像具有width=“0”和height=“0”。我不确定这里发生了什么，是浏览器、reactjs还是引导

---

有人有线索吗？

我刚刚在img元素中添加了内嵌样式，将宽度和高度设置为“自动”。这似乎解决了问题

<img style={{width:'auto',height:'auto'}} src="img/icon-pencil.svg" />