Chrome和Safari中代码镜像块的高度并不相同 [英] The height of the code-mirror block are not the same in Chrome and Safari
问题描述
我想制作一个满足以下条件的布局：
$ b $ 1它顶部有一个块，它的 height 取决于它的内容
<2>）它有一个
代码镜像和一个块边在 中填写 页面的其余部分。 <我已经在这里制作了一个
编辑＃2
Safari（iOS）的另一个问题是它不支持CSS中的最小宽度（实际上只在二次查看的表元素上）。样式表中的外部链接可能使用最小宽度，所以这可能也会影响输出。它被记录为在iOS 5.1中发生，但尚不清楚是否在更高版本中修复。
I want to make a layout that satisfies the following conditions:
1) it has a block on the top whose height is up to its content
2) below it has a code-mirror and a block side by side, which fill in exactly the rest of the page in terms of height.
I have made a plunker here. The problem is it works well in Chrome 57.0.2987.133, whereas it does NOT work well in Safari 10.1: the height of the code-mirror is NOT enough; it shows only 76 lines of the code rather than the correct 80 lines.
Does anyone know how to fix this?
<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>
According to http://www.caniuse.com, there are few 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.
As you have set border-widths in the code posted, the use of vertical height (vh) as a measurement unit is going to pose a problem for you.
There are a few workarounds I suppose, you could use percentage, adjust the vh if safari using browser detection (modernizer?) or you could perhaps add a margin or padding? Just some thoughts off the top of my head. Good luck.
Hope this helps
EDIT: Your issue may lie with the use of flex which unfortunately has issues in Safari which is marked as fixed because it used to appear in Chrome also, but was fixed in Chrome 51. It still occurs in Safari according to caniuse
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
The indication that non-flex children is NOT measured in % would suggest that vh may be used instead (which leads back to my earlier answer).
On the upside, it's not just you that's experiencing the issue! It's a known bug that should be fixed in a future release. Every cloud has a silver lining.. :)
EDIT #2
Another issue with Safari (iOS) is that it doesn't support min-width (actually only on table elements on second look) in CSS. Your externally linked in stylesheets may be using min-width so this may also have an effect on the output. It is recorded as happening in iOS 5.1 but it is unclear whether it was fixed in later versions.
这篇关于Chrome和Safari中代码镜像块的高度并不相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
