Question

在当前项目中，我有一个类似的结构（这里我非常简化了结构）：

HTML

<div class="container">
  <div class="columns">

    <div class="column1">
        <div class="openFlexbox"> OPEN </div>
        <div class="flexbox">TEST
          <span class="close">X</span> 
        </div>
     </div>


    <div class="column1">
        <div class="openFlexbox"> OPEN </div>
        <div class="flexbox">TEST
          <span class="close">X</span> 
        </div>
     </div>

    <div class="column1">
        <div class="openFlexbox"> OPEN </div>
        <div class="flexbox">TEST
          <span class="close">X</span> 
        </div>
     </div>

    <div class="column1">
        <div class="openFlexbox"> OPEN </div>
        <div class="flexbox">TEST
          <span class="close">X</span> 
        </div>
     </div>

  </div>
</div>

CSS

    .container {
        border:1px solid black;
        width:600px;
        min-height:200px;
        margin: 0 auto;
        background: #ddd;
        display:flex;
        display: -ms-flexbox;
    }
    .columns {
        column-gap: 8em;
        column-count: 2;
    }
    .column1 {
        display: block;
        border:1px solid red;
        width:200px;
        height: 200px;
        margin:10px;
        position:relative;
    }
    .flexbox {
        display:none;
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: #aaa;
        font-size:30px;
        text-align:center;
        z-index: 9999
    }
    .flexbox.open {
        display:block;
    }

    .close {
        border:1px solid #fff;
        padding: 5px;
    }
    .openFlexbox {
        background: #a6dbea;
        padding: 10px 0;
        text-align:center;
        display:inline-block;
        position:absolute;
        width: 100px;
        left: 50%;
        margin-left:-50px;
        top: 40%;
    }

JS

jQuery('.openFlexbox').on('click',function(e) {
    jQuery(this).next('.flexbox').addClass('open');
});

jQuery('.close').on('click',function() {
    jQuery('.flexbox').removeClass('open');
});

Firefox和Chrome没有任何问题，在Microsoft边缘，模式框出现＆＃34; halfsize＆＃34;占据该块所在列的一半区域（在此示例中，它根本不显示）。

实际上，通过删除相对位置，问题就会消失，但是＆＃34;位置：相对＆＃34;我用按钮中心.. 但是，相对位置不应该影响固定位置。

有解决此问题的方法吗？

Answer 1

＆＃39; openflexbox＆＃39;不涵盖整个区域，但也许这对你有用吗？

的CSS：

$charge = \Stripe\Charge::create(array(
 "amount" => 1000,
 "currency" => "usd",
 "description" => "Example charge",
 "source" => $token,
 ));

JS：

.flexbox {
    display:none;
    /*position: fixed;*/
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #aaa;
    font-size:30px;
    text-align:center;
    z-index: 9999;
}

在Microsoft Edge上修复的列数和位置

1 个答案: