代码之家 › 专栏 › 技术社区 › Alexander Farber

在Firefox和IE11中,Canvas元素或其父元素在CSS flexbox中过大[重复]

flexbox css html

Alexander Farber · 技术社区 · 4 年前

#pixiCanvas ,同时保持黄色 #hintDiv 和 #totalDiv

问题是,虽然我的代码在其他浏览器(Firefox、Chrome、Opera、Edge,甚至ie11)上运行得很好,但在我按照建议添加 min-width , min-height 到 #mainDiv 和它的孩子)它 不适用于Safari 14/MacOS

#主要部门 #gameDiv 长得太高,推得太紧 #pixiCanvas公司

- fullDiv (should occupy 100% / 100 vh)
-- leftDiv
-- mainDiv
--- hintDiv (100% width, on top of screen)
--- gameDiv (should have max possible width and height)
--- totalDiv (100% width, on bottom of screen)
-- rightDiv

以下是我的代码(在Safari中打开以查看问题):

  $(function() {
    $(':button').button();
    $('#fullCheck').checkboxradio();

    var gamesMenu = $('#gamesMenu').menu({
      items: '> :not(.ui-widget-header)',
      select: function(ev, ui) {
        ui.item.addClass('selected').siblings().removeClass('selected');
      }
    });

    for (var game = 1; game <= 50; game++) {
      gamesMenu.append('<LI CLASS="ui-menu-item-wrapper" VALUE="' + game + '">GAME ' + game + '</LI>');
    }

    gamesMenu.menu('refresh');

    var WIDTH = 400;
    var HEIGHT = 400;

    var app = new PIXI.Application({
      width: WIDTH,
      height: HEIGHT,
      view: document.getElementById('pixiCanvas'),
      backgroundColor: 0xFFFFFF
    });

    var background = new PIXI.Graphics();
    for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
        if ((i + j) % 2 == 0) {
          background.beginFill(0xCCCCFF);
          background.drawRect(i * WIDTH / 8, j * HEIGHT / 8, WIDTH / 8, HEIGHT / 8);
          background.endFill();
        }
      }
    }
    app.stage.addChild(background);
  });

body {
  margin: 0;
  padding: 0;
}

#fullDiv {
  width: 100%;
  height: 100vh;
  background: #FFF;
  display: flex;
}

#hintDiv,
#totalDiv {
  font-style: italic;
  text-align: center;
  background: yellow;
}

#leftDiv {
  text-align: center;
  background: #FCC;
  display: flex;
  flex-direction: column;
}

#gamesMenu {
  overflow: auto;
}

#mainDiv {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 200px;
  min-height: 200px;
  
  box-sizing: border-box;
  border: 1px green dashed;
}

#gameDiv {
  flex-grow: 1;
  min-width: 150px;
  min-height: 150px;
}

#pixiCanvas {
  width: 100%;
  height: 100%;
  min-width: 100px;
  min-height: 100px;
  background: #CCF;

  box-sizing: border-box;
  border: 4px red dotted;
}

#rightDiv {
  text-align: center;
  background: #CFC;
  overflow-y: auto;
}

li.selected {
  font-weight: bold;
  background-color: yellow;
}

<div id="fullDiv">
  <div id="leftDiv">
    <button id="newBtn">New game</button>
    <ul id="gamesMenu"></ul>
  </div>

  <div id="mainDiv">
    <div id="hintDiv">Hint</div>

    <div id="gameDiv">
      <canvas id="pixiCanvas"></canvas>
    </div>

    <div id="totalDiv">Total score</div>
  </div>

  <div id="rightDiv">
    <input id="fullCheck" type="checkbox">
    <label for="fullCheck">Full screen</label><br>
    <button id="recallBtn">Recall</button><br>
    <button id="shuffleBtn">Shuffle</button><br>
    <button id="swapBtn">Swap</button><br>
    <button id="skipBtn">Skip</button><br>
    <button id="resignBtn">Resign</button><br>
    <button id="pileBtn">Pile</button><br>
    <button id="movesBtn">Moves history</button><br>
    <button id="shareBtn">Share</button><br>
    <button id="playBtn">Play</button>
  </div>
</div>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.3/dist/pixi.min.js"></script>

my word game ,其中

到目前为止,我唯一能想到的解决方法是:

if (navigator.userAgent.indexOf('Safari') >= 0) {
    $('#gameDiv').css('overflow', 'auto');
}

但它使我的文字游戏的使用尴尬,而拖字母。

P、我不想切换到CSS网格,因为我觉得CSS flex更受支持(我的一些用户仍然使用ie11)。

0 回复 | 直到 4 年前

MaxiGui VMcreator 4 年前

只需添加 display: contents; #gameDiv

#gameDiv{
  display: contents;
}

浏览器兼容性 display contents

如您所见,此显示与IE不兼容。但这很好,因为IE将忽略它并应用默认值 display: block

任何如果你想它一定要应用正确的显示,你仍然可以保持 显示:块 使用2个显示器 subject

使用:

@supports (display: contents) {
  #gameDiv { display: contents; }
}

$(function() {
    $(':button').button();
    $('#fullCheck').checkboxradio();

    var gamesMenu = $('#gamesMenu').menu({
      items: '> :not(.ui-widget-header)',
      select: function(ev, ui) {
        ui.item.addClass('selected').siblings().removeClass('selected');
      }
    });

    for (var game = 1; game <= 50; game++) {
      gamesMenu.append('<LI CLASS="ui-menu-item-wrapper" VALUE="' + game + '">GAME ' + game + '</LI>');
    }

    gamesMenu.menu('refresh');

    var WIDTH = 400;
    var HEIGHT = 400;

    var app = new PIXI.Application({
      width: WIDTH,
      height: HEIGHT,
      view: document.getElementById('pixiCanvas'),
      backgroundColor: 0xFFFFFF
    });

    var background = new PIXI.Graphics();
    for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
        if ((i + j) % 2 == 0) {
          background.beginFill(0xCCCCFF);
          background.drawRect(i * WIDTH / 8, j * HEIGHT / 8, WIDTH / 8, HEIGHT / 8);
          background.endFill();
        }
      }
    }
    app.stage.addChild(background);
  });

body {
  margin: 0;
  padding: 0;
}

#fullDiv {
  width: 100%;
  height: 100vh;
  background: #FFF;
  display: flex;
}

#hintDiv,
#totalDiv {
  font-style: italic;
  text-align: center;
  background: yellow;
}

#leftDiv {
  text-align: center;
  background: #FCC;
  display: flex;
  flex-direction: column;
}

#gamesMenu {
  overflow: auto;
}

#mainDiv {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 200px;
  min-height: 200px;
  
  box-sizing: border-box;
  border: 1px green dashed;
}

#gameDiv {
  flex-grow: 1;
  min-width: 150px;
  min-height: 150px;
}

#pixiCanvas {
  width: 100%;
  height: 100%;
  min-width: 100px;
  min-height: 100px;
  background: #CCF;

  box-sizing: border-box;
  border: 4px red dotted;
}

#rightDiv {
  text-align: center;
  background: #CFC;
  overflow-y: auto;
}

li.selected {
  font-weight: bold;
  background-color: yellow;
}

#gameDiv{
  display: contents;
}

<div id="fullDiv">
  <div id="leftDiv">
    <button id="newBtn">New game</button>
    <ul id="gamesMenu"></ul>
  </div>

  <div id="mainDiv">
    <div id="hintDiv">Hint</div>

    <div id="gameDiv">
      <canvas id="pixiCanvas"></canvas>
    </div>

    <div id="totalDiv">Total score</div>
  </div>

  <div id="rightDiv">
    <input id="fullCheck" type="checkbox">
    <label for="fullCheck">Full screen</label><br>
    <button id="recallBtn">Recall</button><br>
    <button id="shuffleBtn">Shuffle</button><br>
    <button id="swapBtn">Swap</button><br>
    <button id="skipBtn">Skip</button><br>
    <button id="resignBtn">Resign</button><br>
    <button id="pileBtn">Pile</button><br>
    <button id="movesBtn">Moves history</button><br>
    <button id="shareBtn">Share</button><br>
    <button id="playBtn">Play</button>
  </div>
</div>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.3/dist/pixi.min.js"></script>