<p> 内容溢出 ie11 中的 div [重复]

Posted 2023-03-06

【中文标题】<p> 内容溢出 ie11 中的 div [重复]

【英文标题】：<p> content is overflowing the div in ie11 [duplicate]

【发布时间】：2019-11-04 20:14:49

【问题描述】：

每个项目容器下的描述性语句仅在 IE11 中溢出 div 容器，但在所有其他测试的浏览器（chrome、edge 和 firefox）中，文本按预期换行。

So this is one paragraph tag right above the issues that is formatting just fine IE11

here is an example of the issue see how the sentence is over flowing IE11

here is the exact same thing in Chrome, which is the same in firefox and edge.

很多谷歌搜索都没有运气，也许我只是在寻找错误的东西。

<div class="projects">
          <div class="project">
            <img src="img/outerspace.JPG"  class="img" >
            <ul>
              <li><label class="projectBtn" id="projectOne"><a href="github.com"> Preview! </a></label></li>
              <li><label class="projectBtn"><a href="https://www.github.com/" target="_blank">See the code!</a></label></li>
            </ul>
            <h3 class="technologies">Technologies</h3>
            <ul  class="tech-list">
              <li>html 5</li>
              <li>CSS3</li>
              <li>Vanillla JS</li>
            </ul>
            <p>
           This is a basic Space site using a JSON API call to showcase the 
           image of the day from nasa.
            </p>
          </div>
          <div class="project">
            <img src="img/angelosgallery.JPG"  class="img"  >
            <ul>
              <li><label class="projectBtn"><a href="https://brandon-b91.github.io/angelos-gallery/" target="_blank">Preview!</a></label></li>
              <li><label class="projectBtn">See the code!</label></li>
            </ul>
            <h3 class="technologies">Technologies</h3>
            <ul  class="tech-list">
              <li>Html 5</li>
              <li>CSS3</li>
              <li>Vanillla JS</li>
            </ul>
            <p>
              This is an artists dream a scrolling showcase image carousel 
              using Vanilla JS
              a section to see a list out of current projects and a section 
             for upcoming projects.
            </p>
          </div>

.projects 
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;



.projets ul, li 
  display: inline-block;


.project 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;

【问题讨论】：

不建议在 中写

请提供参考“不建议在中写

NetBeans IDE 7.2 HTML 验证器@Michael_B

等等，为什么我们不能在 中使用

您可以查看此链接中提到的许多解决方法，它可能会帮助您解决问题。参考：github.com/philipwalton/flexbugs/issues/170

【参考方案1】：

我认为这是 IE10 和 IE11 中嵌套 flexboes 的问题。尝试添加

flex: 1 1 0%

到你的“项目”类 css 样式，看看是否能解决它！

【讨论】：

所以这毕竟行不通，所以 IE 有嵌套 flexbox 的问题 它有网格问题 有没有办法我可以切实地将 IE 扔在地板上并在其上上下跳动?