Chrome 和 Safari 中代码镜像块的高度不同

Posted 2023-03-06

技术标签:

【中文标题】Chrome 和 Safari 中代码镜像块的高度不同【英文标题】：The height of the code-mirror block are not the same in Chrome and Safari 【发布时间】：2017-10-04 20:17:24 【问题描述】：

我想做一个满足以下条件的布局：

1) 它的顶部有一个块，其height 取决于它的内容

2) 在它下面有一个code-mirror 和一个并排的块，它们完全按照height 填充页面的其余部分。

我在这里做了一个plunker。问题是它在Chrome 57.0.2987.133 中运行良好，而在Safari 10.1 中运行不佳：code-mirror 的height 还不够；它只显示代码的76 行，而不是正确的80 行。

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

<style>
    .rb 
        display: flex;
        flex-direction: column;
        height: 100%;
    
    .rb .container 
        flex: 1;
        display: flex;
        width: 100%;
        height: 100% /* new */
    
    .rb .first-row 
        border: 1px solid black;
        /*flex: 0 0 60px;*/
    
    .rb .CodeMirror 
        flex: 1;
        height: auto;
    
    .rb .flex-preview 
        flex: 1;
        border: 1px solid black;
    
</style>

<div class="rb">
    <div class="first-row">
        1<br/>2<br/>3<br/>4<br/>
    </div>
    <div class="container">
        <textarea ng-model="body" ui-codemirror="option"></textarea>
        <div class="flex-preview">
        </div>
    </div>
</div>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <ui-view></ui-view>
  </div>
  <script>
    var app = angular.module("myApp", ['ui.router', 'ui.codemirror']);
    app.config(['$stateProvider', function ($stateProvider) 
        $stateProvider
            .state('global', 
              templateUrl: 'template.html'
            )
    ]);
    app.controller('myCtrl', ['$scope', '$state', function ($scope, $state) 
      $scope.option =  mode: 'text/html', lineNumbers: true, matchBrackets: true ;
      $scope.body = ""
      for (var i = 1; i <= 79; i++) 
          $scope.body = $scope.body + "a\n";
      $state.go('global')
    ])

  </script>
</body>

【问题讨论】：

星号 css (*) 选择所有元素（或选定类型的元素，具体取决于您的编码方式），例如div * css here 见w3schools.com/cs-s-ref/sel_all.asp 你把你的rb变成id了吗？这可能有助于尝试这个run.plnkr.co/q1bvFaeFVsbBviQs 我在上面发布的 plunker 在 windows safari 中工作。你是怎么上去的它说“未找到” plnkr.co/edit/8XYdWN3tRXjIfUWTCSRV?p=preview 虽然其他链接有效，但我分叉了你的 【参考方案1】：

您正在使用 height: 100% 设置 code-mirror 容器 (.rb) 的高度。但是您没有在父容器上指定任何高度。

当您使用百分比高度时，某些浏览器仍要求您在父级上定义高度（使用height 属性）。这是spec language 的传统实现，尽管并非所有浏览器都遵循这种解释。

但是，如果您要在元素上使用height: 100%，并且希望确保跨浏览器支持，请确保父容器具有定义的高度。如果父级也使用百分比高度，则其父级也必须具有定义的高度。

或者，只需在 .rb 上使用 height: 100vh 即可。

那么您在.container 上的flex: 1 将消耗可用高度。

更多信息和其他解决方案在这里：

Chrome / Safari not filling 100% height of flex parent Working with the CSS height property and percentage values

【讨论】：

这是plunker 和height: 100vh。在 Safari 中，它仍然只显示代码的 76 行，而不是正确的 81 行。你能提供一个工作的plunker吗？如果您可以在问题中发布足够多的代码来重现问题，我们可以为您提供更具体的帮助。【参考方案2】：

根据http://www.caniuse.com，很少有known issues with Safari re vh：

Safari & ios Safari (both 6 and 7) does not support viewport units 
for border widths, column gaps, transform values, box shadows or in calc().

iOS 7 Safari sets viewport unit values to 0 if the page has been left 
and is returned to after 60 seconds.

iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw
as vh, when orientation changes.

vh on iOS is reported to include the height of the bottom toolbar in the
height calculation, and the width of the sidebar (bookmarks) in the vw 
width calculation.

由于您在发布的代码中设置了边框宽度，因此使用垂直高度 (vh) 作为测量单位会给您带来问题。

我想有一些解决方法，您可以使用百分比，如果 safari 使用浏览器检测（现代化工具？）调整 vh，或者您可以添加边距或填充？只是我的一些想法。祝你好运。

希望对你有帮助

编辑：您的问题可能在于使用 flex 不幸的是 issues in Safari 被标记为已修复，因为它也曾出现在 Chrome 中，但在 Chrome 51 中已修复。根据 @987654324 它仍然出现在 Safari 中@

In Safari, the height of (non flex) children are not recognized in percentages. 
However other browsers recognize and scale the children based on percentage heights. (See bug) 
The bug also appeared in Chrome but was fixed in Chrome 51

非弹性子代不以 % 衡量的迹象表明可以使用 vh 代替（这又回到了我之前的答案）。

从好的方面来说，遇到问题的不仅仅是您！这是一个已知的错误，应该在未来的版本中修复。每朵云都有一线希望.. :)

编辑#2

Safari (iOS) 的另一个问题是它不支持 CSS 中的最小宽度（实际上仅在第二次查看的表格元素上）。您在样式表中的外部链接可能正在使用最小宽度，因此这也可能对输出产生影响。它被记录为happening in iOS 5.1，但不清楚它是否在以后的版本中被修复。

【讨论】：

@SoftTimur 抱歉，其他答案让我感到困惑。我会好好看看 plunkr，但把问题留在那里，他们可能会帮助其他用户 @SoftTimur 在我的 chrome 浏览器（最新的）上，只显示 80 行？自发布以来代码是否已调整？我以为有 81 个？我觉得没有调整，但对我来说现在也80了...我会修改OP... @SoftTimur 评论回到第一行 flex css 中？那样有用吗？我还没试过（PC用户！） @SoftTimur 考虑把你的 rb 类变成一个 id，这样类就可以继承 display:flex; CSS【参考方案3】：

.rb .container 
  flex: 1;
  display: flex;
  width: 100%;
  height: auto /* new */

尝试将高度用作“自动”。

【讨论】：

以上是关于Chrome 和 Safari 中代码镜像块的高度不同的主要内容，如果未能解决你的问题，请参考以下文章

问题008：java 中代码块的风格有几种？单行注释可否嵌套？多行注释可否嵌套？

chrome 和 safari flex 高度 100% 失败

使用 JavaScript 获取图像的真实宽度和高度？（在 Safari/Chrome 中）

测量图像的宽度和高度在 Chrome 和 Firefox 中返回 0，但在 Safari 中有效

Firefox中忽略的最大高度适用于Chrome和Safari

扩大 rmarkdown html 中代码的输出