当前位置: 首页 > 知识库问答 >
问题:

SVG在IE11中中断到下一行

周麒
2023-03-14

我的问题是,尽管我在SVG中添加了“display:inline”,但是IE11中带有文本的a-tag中的SVG仍然会进入下一行。

在a-tag上添加“display:flex”也不能正常工作--只是奇怪地破坏了文本

HTML:



   
   
.m-stage-content {
    max-width: 420px;
    position: absolute;
    bottom: 2rem;
    -webkit-box-shadow: 0 4px 6px rgb(0 0 0 / 15%);
    box-shadow: 0 4px 6px rgb(0 0 0 / 15%);
}

.m-stage-txt {
    border-radius: 4px;
    padding: 1.5rem;
}

.m-stage .-whitebg {
    background: rgba(255,255,255,.9);
}

.c-btn-primary {
    background: #238900;
    text-align: center;
    font-size: .9999rem;
    font-weight: 300;
    padding: .625rem .75rem;
    line-height: 20px;
    border: 1px solid #238900;
    border-radius: 4px;
    color: #fff;
}

.m-stage-btn {
    display: inline-block;
}

.m-stage-btn svg {
    height: 12px;
    vertical-align: baseline;
    margin: 0 0 0 .5rem;
}

.c-btn-primary-icon {
    fill: #fff;
}
html prettyprint-override"><div class="m-stage-content -left">
   <div class="m-stage-txt -whitebg">
      <h1 class="m-stage-headline">Headline</h1>
      <span class="m-stage-description"><h3 style="margin: 0px; padding: 0px; border: 0px currentColor; border-image: none; line-height: 34px; vertical-align: baseline; font-stretch: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit;">Subline<br></h3></span>
      <a class="m-stage-btn c-btn-primary" href="/more">
            More information
            <svg xmlns="http://www.w3.org/2000/svg" class="c-btn-primary-icon" fill="none" viewBox="0 0 8 16">
               <path d="M 0.547594 1.13915 L 0.326625 1.36009 C 0.180188 1.50652 0.180188 1.74396 0.326625 1.89043 L 6.43578 7.99962 L 0.326625 14.1088 C 0.180188 14.2552 0.180188 14.4927 0.326625 14.6391 L 0.547594 14.8601 C 0.694031 15.0065 0.931469 15.0065 1.07791 14.8601 L 7.67325 8.26477 C 7.81969 8.11834 7.81969 7.8809 7.67325 7.73443 L 1.07791 1.13915 C 0.931469 0.99268 0.694031 0.99268 0.547594 1.13915 Z" />
            </svg>
      </a>
   </div>
</div> 

共1个答案

匿名用户

您是否尝试将高度和宽度添加到您的xml中,即需要这样做,否则它会将其作为全宽处理。那么它应该是这样的:

        <svg xmlns="http://www.w3.org/2000/svg" height="80" width="80"  class="c-btn-primary-icon" fill="none" viewBox="0 0 8 16">
           <path d="M 0.547594 1.13915 L 0.326625 1.36009 C 0.180188 1.50652 0.180188 1.74396 0.326625 1.89043 L 6.43578 7.99962 L 0.326625 14.1088 C 0.180188 14.2552 0.180188 14.4927 0.326625 14.6391 L 0.547594 14.8601 C 0.694031 15.0065 0.931469 15.0065 1.07791 14.8601 L 7.67325 8.26477 C 7.81969 8.11834 7.81969 7.8809 7.67325 7.73443 L 1.07791 1.13915 C 0.931469 0.99268 0.694031 0.99268 0.547594 1.13915 Z" />
        </svg>

相关问题


  • Proguard不处理FXML中的onAction调用
  • Visual Studio Code 中的 JUnit
  • 如何从命令行排除mvn构建路径中的特定苍蝇?
  • 如何从源代码中正确构建keycloak
  • 如何解决“HttpAuthenticationFactory的机制[KEYCLOAK]中没有所需的机制'BASIC'”
  • 如何从 Git 克隆存储库并在 Java 中自动运行 Maven 构建
  • java 13 jar文件在java 17中不起作用,收到错误UnafftedClassVersionError
  • 连接到远程服务器ssh并从GIT进行克隆
  • 在Windows Git bash中工作时,gitlab的Git克隆在linux上失败
  • eclipse中的Java运行时环境内存不足消息
  • fx:id="grid "在控制器中保持为空
  • 如何填充在JavaFx Scene Builder中设计的fxml文件中定义的TableView
  • JavaFX控制器中的NullPointerException
  • 从事件中获取应用程序类
  • 如何在JavaFX中正确显示第二个fxml文件视图?
  • 如何将多个控制器连接到一个模型?JavaFX 中的简单窗口应用程序
  • 如何在创建的原始窗口中的控制器之间进行转换
  • 我应该如何从外部调用JavaFX中“Main”类中包含的方法?
  • 使用ActionEvent在JavaFX中切换场景
  • javaFX中的切换场景

共有3个答案

吴高洁
2023-03-14
热门标签
许焕
2023-03-14
相关问题
孔皓
2023-03-14

您是否尝试将高度和宽度添加到您的xml中,即需要这样做,否则它会将其作为全宽处理。那么它应该是这样的:

        <svg xmlns="http://www.w3.org/2000/svg" height="80" width="80"  class="c-btn-primary-icon" fill="none" viewBox="0 0 8 16">
           <path d="M 0.547594 1.13915 L 0.326625 1.36009 C 0.180188 1.50652 0.180188 1.74396 0.326625 1.89043 L 6.43578 7.99962 L 0.326625 14.1088 C 0.180188 14.2552 0.180188 14.4927 0.326625 14.6391 L 0.547594 14.8601 C 0.694031 15.0065 0.931469 15.0065 1.07791 14.8601 L 7.67325 8.26477 C 7.81969 8.11834 7.81969 7.8809 7.67325 7.73443 L 1.07791 1.13915 C 0.931469 0.99268 0.694031 0.99268 0.547594 1.13915 Z" />
        </svg>
 类似资料:
  • 我正在学习angularjs,作为一个测试项目,我正在轮询一个返回活动进程列表(它们的pid)并显示这些进程的服务器。 客户端代码如下所示: 这适用于Firefox和Chrome,但不太适用于Internet Explorer 11。 所有浏览器每秒都执行ReloadData方法,但IE11实际上并不从服务器获取流程数据。Firefox和Chrome确实每秒都会获取数据。我也可以在服务器的输出中看

  • 本文向大家介绍IE11下CKEditor在Bootstrap Modal中下拉问题的解决,包括了IE11下CKEditor在Bootstrap Modal中下拉问题的解决的使用技巧和注意事项,需要的朋友参考一下 最近在项目中需要在Bootstrap Modal弹出框中载入CKEditor。 初始化CKEditor以后,在IE11下,格式/字体/颜色的下拉会闪现一下后就消失,但在chrome和fir

  • 我正在研究一个svg平面布局,用户应该可以放大和缩小。 当我第一次编码它时,缩放特性起作用,但是svg不响应容器大小。我添加了viewbox属性以使其具有响应性,但这会干扰缩放功能--即使您尝试缩放,它也会缩放,并且缩放不像添加viewbox之前那样工作。 以下是两个相互依存关系来演示此问题: 没有ViewBox-SVG可以正确缩放,但不响应容器大小 https://codepen.io/nico

  • SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。 SVG的代码可以直接嵌入到HTML页面中,或您可以直接链接到SVG文件。 使用 <embed> 标签 <embed>: 优势:所有主要浏览器都支持,并允许使用脚本 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许) 语法:<embed src="circle1.svg" typ

  • 问题内容: 我需要使用ctrl c从time.sleep()中断。 在上面的代码中,当控件进入time.sleep函数时,整整60秒钟需要经过python处理CTRL C 有什么优雅的方法可以做到这一点。这样我就可以在控件处于及时状态时中断我的睡眠功能 编辑 我在一个旧的实现中对其进行了测试,该实现在Windows 2000上使用python 2.2,这引起了所有麻烦。如果我使用了更高版本的pyt

  • 我在 Windows 11 上的 IE10 中运行硒脚本,每当我尝试切换到新窗口时,都会低于: 检索当前窗口时出错 无法获取浏览器 然而,相同的代码在Windows 7上的IE11中运行良好。我已经尝试更改注册表以尝试设置功能。仍然面临这个问题。有人能建议解决这个问题吗?