Question

我有一个简单的按钮，其中包含“发送”一词以及一个小纸平面图标。在Chrome中查看时，此图标位置正确，但在Internet Explorer中查看时，svg（纸质平面）覆盖了文本。 如何使纸质平面浮动在Internet Explorer的按钮右侧？

这是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应仅包含非交互式phrasing content。

Updated CodePen

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

2 个答案: