Question

我是Angular Material Design的新手，所以我在使用跨浏览器的webapps时遇到了一些麻烦。 Here's my problem

这3个项目在IE上堆叠，但在Chrome和Firefox上没有。

我希望它们与Chrome / Firefox完全一样

显然问题来自于“layout-align ='center center'”，因为如果我只使用“layout-align ='center'”，它们就不再叠加在IE上了，但它们出现了{{3}在每个浏览器上。

这是HTML：

  <div layout="column" layout-align="center center" style="text-align:center;" style="min-height:400px" ng-repeat="(title,score) in results.scoreByCategories">
    <h4>{{title}} :</h4>
    <div layout="row" layout-xs="column" >
      <div flex>
        <p id="button-debutant" class="rcorners">Débutant</p>
      </div>
      <div flex>
        <p id="button-intermediaire" class="rcorners">Intermédiaire</p>
      </div>
      <div flex>
        <p id="button-confirme" class="rcorners">Confirmé</p>
      </div>
    </div>
  </div>

这是我的CSS：

.rcorners{
    color: grey;
    border-radius: 25px;
    background-color: #e7e7e7;
    padding: 7px;
    width: 110px;
    height: 20px;
    float:left;
    margin: 5px 12px
}

随意指出我的错误！谢谢！

Answer 1

我找到了解决问题的方法

您只需要替换此代码块（由您编写）

<div layout="row" layout-xs="column" >
  <div flex>
    <p id="button-debutant" class="rcorners">Débutant</p>
  </div>
  <div flex>
    <p id="button-intermediaire" class="rcorners">Intermédiaire</p>
  </div>
  <div flex>
    <p id="button-confirme" class="rcorners">Confirmé</p>
  </div>
</div>

这一个：

<div layout="row" layout-xs="column" layout-align="center center" >
    <div>
        <p id="button-debutant" class="rcorners">Débutant</p>
    </div>
    <div >
        <p id="button-intermediaire" class="rcorners">Intermédiaire</p>
    </div>
    <div>
        <p id="button-confirme" class="rcorners">Confirmé</p>
    </div>
</div>

基本上你会强制IE将三个按钮视为一个唯一的行，而之前写的layout-align="center center"（其中有ng-repeat）会将页面的整个部分对齐在页面（垂直和水平）。我不知道为什么IE需要这个额外的工作，但它有效：）

我希望我能帮到你

Angular Material和IE：在Internet Explorer中无法layout-align =“center center”

1 个答案: