reactjs svg在IE中使用零寬度和高度呈現的圖像

我創建了一個ReactJS組件，以在數據表的每一行中顯示編輯/刪除按鈕。reactjs svg在IE中使用零寬度和高度呈現的圖像

這是我的組件：

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;

我測試的IE瀏覽器（因爲這是企業標準），我已經注意到，有時按鈕出現，有時他們不這樣做。有時他們會顯示在一些行而不是其他的。這不一致。在使用開發工具查看渲染的DOM後，我看到按鈕和圖像在那裏，只有圖像的寬度=「0」和高度=「0」。我不確定這裏發生了什麼，如果它是瀏覽器，reactjs或bootstrap。

有沒有人有線索？

來源

2017-04-10 roca323

我只是將img元素設置寬度和高度的內嵌樣式添加到自動。這似乎解決了這個問題。

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

來源

2017-05-11 15:38:25 roca323

reactjs svg在IE中使用零寬度和高度呈現的圖像

回答

相關問題