小编ccp*_*rog的帖子

在可编辑区域内单击以获取较大的行高时，macOS上的Chrome和Linux上的Chromium不会明智地放置插入标记。

在此示例中，我们line-height为<span>元素设置了一个值。由于其他应用程序的要求（主要是使用Quill.js富文本编辑器），无法将其保留并从父元素继承是不可能的。<span>每行可能有多个字体大小不同的字体，但没有嵌套的元素。

p {
  display: inline-block;
  margin: 0;
  background: lightgrey;
}
span {
  line-height: 2.5;
  font-size: 50px;
  background: lightblue;
}
span.small {
  font-size: 25px;
}

<p contenteditable><span>some </span><span class="small">text</span><br/><span>some text</span></p>

在Firefox中，如果单击灰色区域（标记<p>元素），则插入标记将始终位于最近的字符处。如果在线条之间单击，则插入符也将合理定位。

在Chrome中，仅当您在蓝色区域内单击（标记元素）时，插入符号才会定位在最近的字符处。在灰色区域中，插入符结束于下一行的开始，或者如果您单击最后一个跨度的下面，则结束于最后一行的末尾。

如何使用Chrome复制Firefox行为？

注意：display: inline-block按此处的建议给跨度a 不能解决问题。

以下是 Safari 的一个奇怪且明显有问题的行为（使用版本 11 和 12 测试）。一个<foreignObject>包含HTML，缩放时，仍显示在其原始大小，即使其本地用户空间坐标对屏幕进行缩放。HTML 内容将明显溢出 parent <svg>，即使违反明确的 CSS 规则。

这里的其他答案指出需要明确设置宽度和高度（我用百分比和绝对单位进行了测试），并且应该设置命名空间（我在<foreignObject>标签本身和单个直接子项上设置它进行了测试)，但到目前为止没有任何帮助。

奇怪的是，开发工具以其预期的缩放大小显示标记矩形（浏览器窗口中的叠加层），而报告的大小数字是未缩放的。

这是预期的设置：

svg, foreignObject {
  overflow: hidden;
}
rect {
  fill:yellow;
}
#content {
  position: relative;
  width: 100%;
  height: 100%;
  background: red;
  border-radius: 50%;
}

<svg width="200px" height="200px" viewBox="0 0 400 400">
  <rect width="100%" height="100%" />
  <foreignObject width="400" height="400">
    <div id="content" xmlns="http://www.w3.org/1999/xhtml"></div>
  </foreignObject>
</svg>

Safari 截图：

使用 transform 属性（也在 parent 上<g>）而不是通过 viewBox 隐式缩放没有区别。此外，我已经使用了绝对和相对尺寸的所有组合

有谁知道如何解决这个问题？

你可能知道昨晚发布了一个新的Safari:Safari 11.这个最后一个版本创建了一个SVG动画的bug,它在safari 10上工作正常,或者仍在chrome上工作:

我只是没有找到如何解决这个问题,我尝试了一切,-webkit- subfix,容器,原产地等...... 

有人有想法吗？

这是直到最后一个版本的Safari工作的版本:https://jsfiddle.net/3f02je66/

.home_st0 {fill:#FFFFFF;}
.home_st1 {fill:#6CC3BD;}
.home_st2 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:200;stroke-dashoffset:200;}
.home_st3 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:20;stroke-dashoffset:20;}
.home_st4 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:50;stroke-dashoffset:50;}

#casserole {stroke-dasharray:200; stroke-dashoffset:200;}
#casserolePL {stroke-dasharray:20; stroke-dashoffset:20; }
#casserolePR {stroke-dasharray:20; stroke-dashoffset:20; }
#casseroleL {stroke-dasharray:50;  stroke-dashoffset:50;}
#casserole {animation: casserole .8s ease-in-out forwards .8s;}
    @keyframes casserole {
        from{stroke-dashoffset:200; }
        to {stroke-dashoffset:0;}
    }
#casserolePL {animation: casserolePL .5s ease-in-out forwards 1s;}
    @keyframes casserolePL {
        from{stroke-dashoffset:20; }
        to {stroke-dashoffset:40;}
    }
#casserolePR {animation: casserolePR .5s ease-in-out forwards 1.1s;}
    @keyframes casserolePR {
        from{stroke-dashoffset:20; }
        to {stroke-dashoffset:0;}
    }
#casseroleL …