Question

在IE 11上，某个部分的一些文字正在被破坏。

它看起来应该是这样的，并且在我尝试的其他浏览器上运行（Chrome，Firefox，safari，edge等）。

我还使用gulp包编译下面的scss，它将所有供应商前缀添加到旧浏览器兼容性所需的css上。

HTML也在下面。有没有其他人遇到此错误？

我尝试过的所有东西都没用。

我知道它不是弹性盒的问题，因为正方形的排列方式完全正确。

对我而言似乎根本没有解释宽度值，但如果是这样的话，我不知道如何解决它。

redux-saga

.get-involved {
  padding-top: 30px;
  margin-bottom: 120px;
  text-align: center;
}
.get-involved .tag-line-get-involved {
  margin: 0 auto;
  max-width: 570px;
  padding-left: 40px;
  padding-right: 40px;
  text-align: center;
  font-weight: bolder;
}
.get-involved .square-container {
  margin-top: 40px;
  margin-left: 40px;
  margin-right: 40px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.get-involved .square-container div {
  margin-top: 40px;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
@media all and (max-width: 1079px) {
  .get-involved .square-container div {
    width: 350px;
    padding: 0 30px;
  }
}
@media all and (max-width: 900px) {
  .get-involved .square-container div {
    width: 300px;
  }
}
.get-involved .square-container div .square {
  margin-bottom: 20px;
  width: 150px;
  height: 150px;
  border: 2px solid white;
  text-align: center;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 14pt;
}
.get-involved .square-container div .square p {
  padding-left: 10px;
  padding-right: 10px;
}
.get-involved .square-container div .square-orange {
  background-color: #f38331;
}
.get-involved .square-container div .square-orange:hover {
  background-color: #e4680d;
}
.get-involved .square-container div .square-blue {
  background-color: blue;
}
.get-involved .square-container div .square-blue:hover {
  background-color: #0000cc;
}
.get-involved .square-container div .square-aqua {
  background-color: #63abb5;
}
.get-involved .square-container div .square-aqua:hover {
  background-color: #4a919b;
}
.get-involved .square-container div .square-green {
  background-color: #60bf3b;
}
.get-involved .square-container div .square-green:hover {
  background-color: #4c982f;
}
.get-involved .square-container div .description {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

Answer 1

添加新的css规则就足够了：

.get-involved .square-container div  p {
     width: 100%;
 }

示例：

.get-involved {
  padding-top: 30px;
  margin-bottom: 120px;
  text-align: center;
}
.get-involved .tag-line-get-involved {
  margin: 0 auto;
  max-width: 570px;
  padding-left: 40px;
  padding-right: 40px;
  text-align: center;
  font-weight: bolder;
}
.get-involved .square-container {
  margin-top: 40px;
  margin-left: 40px;
  margin-right: 40px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.get-involved .square-container div {
  margin-top: 40px;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
@media all and (max-width: 1079px) {
  .get-involved .square-container div {
    width: 350px;
    padding: 0 30px;
  }
}
@media all and (max-width: 900px) {
  .get-involved .square-container div {
    width: 300px;
  }
}
.get-involved .square-container div .square {
  margin-bottom: 20px;
  width: 150px;
  height: 150px;
  border: 2px solid white;
  text-align: center;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 14pt;
}
.get-involved .square-container div .square p {
  padding-left: 10px;
  padding-right: 10px;
}
.get-involved .square-container div .square-orange {
  background-color: #f38331;
}
.get-involved .square-container div .square-orange:hover {
  background-color: #e4680d;
}
.get-involved .square-container div .square-blue {
  background-color: blue;
}
.get-involved .square-container div .square-blue:hover {
  background-color: #0000cc;
}
.get-involved .square-container div .square-aqua {
  background-color: #63abb5;
}
.get-involved .square-container div .square-aqua:hover {
  background-color: #4a919b;
}
.get-involved .square-container div .square-green {
  background-color: #60bf3b;
}
.get-involved .square-container div .square-green:hover {
  background-color: #4c982f;
}
.get-involved .square-container div .description {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.get-involved .square-container div  p {
  width: 100%;
}

<section id='get-involved' class='get-involved'>
    <h1 class='header'>Get Involved</h1>

    <p class='tag-line tag-line-get-involved'>
        Become a partner in action!
    </p>

    <div class='square-container'>

        <div>
            <button ui-sref='launch' class='square square-orange'>
                <p>Launch a Chapter</p>
            </button>
            <p>Start a chapter on your campus!</p>
            <p class='description'>We provide all the necessary resources and guide you through the process so you can spend less time with the setup and more time effecting change!</p>
        </div>

        <div>
            <button ui-sref='become-mentor' class='square square-blue'>
                <p>Become a Mentor</p>
            </button>
            <p>Are you a young college alum looking to get involved?</p>
            <p class='description'>Apply to mentor a team of studentes committed to making change in your community. We make it easy to give back!
            </p>
        </div>

        <div>
            <button ui-sref='nominate' class='square square-aqua'>
                <p>Nominate an
                    <br>Issue Advisor</p>
            </button>
            <p>Do you know a great advisor for the network?</p>
            <p class='description'>Advisors join our student teams on a bimonthly call to share insight into new developments in their field and answer questions.
            </p>
        </div>


        <div>
            <button ui-sref='support' class='square square-green'>
                <p>Support Kinetic Global</p>
            </button>
            <p>Support college students making change in your community!</p>
            <p class='description'>Kinetic Global is a lean operation, so we offer multiple ways to contribute to the network (financially and in-kind).</p>
        </div>

    </div>
</section>

文本不会在IE 11 flex布局中换行

1 个答案: