【发布时间】：2017-01-01 02:15:10
【问题描述】：
在 IE 11 上，部分文本被破坏。
它应该看起来像这样，并且在我尝试过的所有其他浏览器（Chrome、Firefox、safari、edge 等）上都是如此。
我还使用 gulp 包来编译下面的 scss，它将所有供应商前缀添加到在旧浏览器上兼容所需的 css。
HTML 也在下面。以前有没有其他人遇到过这个错误？
我尝试的一切都没有奏效。
我知道这不是 flex-box 的问题，因为正方形完全按照它们应该的方式排列。
在我看来，宽度值似乎根本没有被解释，但如果是这种情况，我不知道如何解决它。
.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;
}<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>【问题讨论】：
-
如果你在描述类中指定宽度或者
div > p { width: 150px; } -
将此添加到您的代码中：
.get-involved .square-container div > * { width: 100%; }jsfiddle.net/nLxbzzsf/2（详细信息在副本中） -
知道了。谢谢你。这是 IE 11 的一个非常奇怪的属性，很高兴知道
标签： html css internet-explorer flexbox