React-ace: 当高度或宽度为百分比时，编辑器在Safari中不起作用

创建于 2017-07-12 · 13评论 · 资料来源: securingsincity/react-ace

问题

该编辑器在Chrome中工作正常，但在Safari中无法正常显示。查看结果标记，它甚至没有以相同的方式呈现。

这是Safari中装订线的HTML外观：

<div class="ace_gutter">
  <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: -5px; height: 52px; width: 42px;">
    <div class="ace_gutter-cell " style="height: 19px;">3</div>
  </div>
  <div class="ace_gutter-active-line" style="top: -5px; height: 19px;"></div>
</div>

以下是Chrome中装订线的相同HTML：

<div class="ace_gutter">
  <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px; height: 585px; width: 42px;">
    <div class="ace_gutter-cell " style="height: 19px;">1<span class="ace_fold-widget ace_start ace_open" style="height: 19px;"></span></div>
    <div class="ace_gutter-cell " style="height: 19px;">2</div>
    <div class="ace_gutter-cell " style="height: 19px;">3</div>
  </div>
  <div class="ace_gutter-active-line" style="top: 38px; height: 19px;"></div>
</div>

由于VoiceOver仅在Safari上可以正常使用，因此VoiceOver在Mac上用于可访问性时很难进行测试，而VoiceOver是Mac的主屏幕阅读器。

示例代码重现您的问题

无需特殊的代码示例，只需在Chrome和Safari中加载演示（http://securingsincity.github.io/react-ace/）

bug help wanted issue with ace

资料来源

backwardok

所有13条评论

@backwardok我可以复制，但是我不确定原因是什么。 Ace库本身可能是一个问题。我会进一步调查。

securingsincity 于 2017-07-18

有趣的是，拆分编辑器@backwardok的工作原理为http://securingsincity.github.io/react-ace/split.html，所以我想知道这是否与演示的配置之一有关。

securingsincity 于 2017-07-18

因此，在进行了一些调试之后，编辑器示例可以在没有height="100%" ，至少可以说这很有趣...我现在将其从示例中删除。不确定问题出在哪里，可能与Ace有关

securingsincity 于 2017-07-19

奇怪的！希望这种解决方法也可以解决我们在使用它时遇到的问题。感谢您调查！

backwardok 于 2017-07-19

@backwardok没问题。只是因为我很好奇，您在使用什么样的项目？

securingsincity 于 2017-07-19

@securingsincity我们正在故事书中的操场上使用它，以使开发人员可以使用我们库中存在的不同反应组件。

backwardok 于 2017-07-19

更改标题似乎是ace独有的问题，并将高度和宽度设置为百分比。

securingsincity 于 2017-08-03

它似乎在Safari和Chrome中与ace一起使用。还是我做错了什么？
证明

dmigo 于 2017-08-06

@dmigo它不使用React组件吗？只是ace.js ？

kavink 于 2017-12-20

不知道自从我创建该示例以来该示例是否发生了变化，但是该示例似乎可以在Safari中运行？

backwardok 于 2017-12-20

@backwardok对我来说不起作用的是react组件，“ width”不占百分比，仅占“ 500px”。
我还没有弄清楚如何缩放和适合容器。

kavink 于 2017-12-20

😕4

react-ace似乎仍然不能占宽度或高度的百分比。

connorwaslo 于 2018-06-03

到今天为止，如果在宽度或高度上添加任何'％'味道，react-ace仍不会呈现，并且将无法缩放以适合父对象。
编辑：但是，我可以通过将高度和宽度设置为“自动”，然后使父级强制弯曲来使其正常工作。

confiant-mfb 于 2019-08-06

👀2

此页面是否有帮助？

0 / 5 - 0 等级

React-ace: 当高度或宽度为百分比时，编辑器在Safari中不起作用

问题

示例代码重现您的问题

所有13条评论

相关问题