1
在IE 11上，部分文本的某些內容正在變形。文本不包裹在IE 11 flex佈局
它應該是這樣的不和在其他瀏覽器我試過（瀏覽器，火狐，Safari，邊緣等）。
我還使用gulp軟件包來編譯下面的scss，它將所有供應商前綴添加到舊版瀏覽器兼容所需的css中。
HTML也在下面。有沒有其他人遇到過這個錯誤？
我試過的一切都沒有奏效。
我知道它不是彈性盒的問題，因爲方格的排列方式應該完全相同。
對我來說，似乎寬度值根本沒有被解釋，但如果是這種情況，我不知道如何解決它。
.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 {寬度它的工作原理：150像素; }' – Legends
將此代碼添加到您的代碼中：'.get-involved .square-container div> * { width：100％; } https://jsfiddle.net/nLxbzzsf/2/（詳細信息請參見副本） –
明白了。謝謝。這是IE 11的一個非常奇怪的屬性，很好理解 – sam4444