按钮内的 svg 覆盖文本，但我需要它在按钮内浮动

Question

我有一个简单的按钮，其中包含单词 "Send" 以及一个小纸飞机图标。在 Chrome 中查看时，此图标的位置正确，但在 Internet Explorer 中查看时，svg（纸平面）覆盖了文本。 如何在 Internet Explorer 中让纸飞机漂浮在按钮的右侧？

这是 link 到 page on my server 这是 codepen

按钮的 HTML 是：

 <button>
 <!-- <p>Fire Away!</p>-->
   <p>Ready, Aim...</p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path> 
  </svg>
</button>

感谢您的帮助

Answer 1

尽管 html 语法。这是解决问题的另一种方法。

使用附加了 svg 的锚标签。

测试：http://jsfiddle.net/vfL0pyq5/2/

<a href="http://google.com/">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" width="100" height="100">
    <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path> 
  </svg>
</a>

当然需要申请CSS

Answer 2

此样式导致 IE 出现问题：

button svg {
  width: auto;
}

对宽度进行硬编码修复：

button svg {
  width: 30px;
}

此外，从按钮中删除 p 标签。仅 Buttons should contain non-interactive phrasing content。

Updated CodePen

按钮内的 svg 覆盖文本，但我需要它在按钮内浮动

An svg within a button is overlaying the text, but I need it to float right within button

html

css

svg

button