Css 弹性箱屏幕的IE11问题无法正确安装角度8

Css 弹性箱屏幕的IE11问题无法正确安装角度8,css,bootstrap-4,flexbox,Css,Bootstrap 4,Flexbox,我在IE11中遇到了一个CSS问题,所有其他浏览器都可以正常工作。 问题是由于字符串长度导致屏幕无法正确插入浏览器 我尝试将display:flex、flex:11 auto、flex wrap:wrap、whitespace:pre wrap设置为跨度为长字符串的父div 请帮我解决这个问题。 我还复制了IE11生成的HTML 注意:屏幕截图是裁剪版本。 HTML标记: <div class="row pad1-0" _ngcontent-ean-c19=""> <a

我在IE11中遇到了一个CSS问题,所有其他浏览器都可以正常工作。 问题是由于字符串长度导致屏幕无法正确插入浏览器

我尝试将display:flex、flex:11 auto、flex wrap:wrap、whitespace:pre wrap设置为跨度为长字符串的父div

请帮我解决这个问题。 我还复制了IE11生成的HTML

注意:屏幕截图是裁剪版本。

HTML标记:

<div class="row pad1-0" _ngcontent-ean-c19="">
   <aside class="col-md-3 ng-star-inserted" id="sidebar" style="top: 0px;" _ngcontent-ean-c19="">
    <div class="toggle-side" _ngcontent-ean-c19="">
      <i class="fa fa-bars" _ngcontent-ean-c19=""></i>
    </div>
    <ul class="participant-menu popmenu" _ngcontent-ean-c19="">
      <li class="menu-item ia-language saved" data-goto="ia-language" _ngcontent-ean-c19="">
        Languages</li>
          </ul>
    </aside>

    <main class="col-md-9 ng-star-inserted" id="main" _ngcontent-ean-c19="">

    <section class="overview-options pad2-0 tright" _ngcontent-ean-c19="">
      <div class="btn-group" role="group" _ngcontent-ean-c19="">
        <button class="btn btn-secondary" onclick="window.print();" _ngcontent-ean-c19="">
          <i class="fa fa-print" _ngcontent-ean-c19=""></i> Print</button>
        <!--bindings={
       "ng-reflect-ng-if": "true"
       }--><button disabled="" class="btn btn-success btn-submit ng-star-inserted" _ngcontent-ean- 
      c19="">
          <i class="fa fa-paper-plane" _ngcontent-ean-c19=""></i> Submit</button>
      </div>
    </section>


    <app-languages-overview ng-reflect-model-errors="[object Object]" ng-reflect-has-edit-access="true" 
    ng-reflect-section="[object Object]" ng-reflect-validation-manager="[object Object]" ng-reflect-has- 
    fcdp-role="false" _ngcontent-ean-c19="" _nghost-ean-c21=""><section class="overview ia fields 
    language current" id="ia-language" _ngcontent-ean-c21="">

    <app-overview-card-header ng-reflect-title="Languages" ng-reflect-is-edit-hidden="true" ng-reflect- 
    row-version="AAAAAABxc2A=" _ngcontent-ean-c21="" _nghost-ean-c35=""><div class="partTitle flex-row" 
    _ngcontent-ean-c35="">
    <span class="secTitle" _ngcontent-ean-c35="">Languages</span>
    <div class="flex-row history-dropdown ng-star-inserted" _ngcontent-ean-c35=""></div>
    <nav class="right" _ngcontent-ean-c35="">
      <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-history" _ngcontent-ean-c35=""> 
     </i></a>     
      <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-pencil-alt" _ngcontent-ean- 
    c35=""></i></a>
     <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-compress ng-star-inserted" 
    _ngcontent-ean-c35=""></i></a>
     </nav>
      </div>
      </app-overview-card-header>
     <div class="part language border-right ng-star-inserted" _ngcontent-ean-c21="">

     <div class="flex-row overviewContainer ng-star-inserted" _ngcontent-ean-c21="">
      <div class="overview-field flex-row col-md-6 overviewItem" _ngcontent-ean-c21="">
        <span title="What language do you use at home?" class="ovtitle" _ngcontent-ean-c21="">Home 
     Language</span>
        <span class="ovval" _ngcontent-ean-c21="">English&nbsp;</span>
      </div>
      <div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
        <span title="Read" class="ovtitle" _ngcontent-ean-c21="">Read</span>
        <span class="ovval" _ngcontent-ean-c21="">Yes&nbsp;</span>
      </div>
      <div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
        <span title="Write" class="ovtitle" _ngcontent-ean-c21="">Write</span>
        <span class="ovval" _ngcontent-ean-c21="">Yes&nbsp;</span>
      </div>
      <div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
        <span title="Speak" class="ovtitle" _ngcontent-ean-c21="">Speak</span>
        <span class="ovval" _ngcontent-ean-c21="">Yes&nbsp;</span>
      </div>
    </div>

    <div class="ng-star-inserted" _ngcontent-ean-c21="">
     <div class="flex-row overviewContainer ng-star-inserted" _ngcontent-ean-c21="">
        <div class="overview-field flex-row col-md-6 caret overviewItem blank" _ngcontent-ean-c21="">
          <span title="List any other languages you know" class="ovtitle" _ngcontent-ean-c21="">Other 
       Language

          </span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
        <div class="overview-field flex-row col-md-2 overviewItem blank" _ngcontent-ean-c21="">
          <span title="Read" class="ovtitle" _ngcontent-ean-c21="">Read</span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
        <div class="overview-field flex-row col-md-2 overviewItem blank" _ngcontent-ean-c21="">
          <span title="Write" class="ovtitle" _ngcontent-ean-c21="">Write</span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
        <div class="overview-field flex-row col-md-2 overviewItem blank" appHistoryData="" _ngcontent- 
      ean-c21="">
          <span title="Speak" class="ovtitle" _ngcontent-ean-c21="">Speak</span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
      </div>
    </div>

    <div class="flex-row overviewContainer" _ngcontent-ean-c21=""></div>

    <div class="flex-row overviewContainer" _ngcontent-ean-c21="">
      <div class="overview-field flex-row col-md-12 overviewItem blank" _ngcontent-ean-c21="">
        <span title="Notes" class="ovtitle" _ngcontent-ean-c21="">Notes</span>
        <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
      </div>
    </div>
    </div>
   </section>
   </app-languages-overview>

     <app-ncp-overview style="overflow: hidden; display: flex; align-items: stretch;" ng-reflect-model- 
     errors="[object Object]" ng-reflect-has-edit-access="true" ng-reflect-section="[object Object]" ng- 
    reflect-validation-manager="[object Object]" ng-reflect-has-fcdp-role="false" _ngcontent-ean-c19="" 
    _nghost-ean-c33=""><section class="overview ia fields ncp current ng-star-inserted" id="ia-ncp" 
     _ngcontent-ean-c33="">


     <app-overview-card-header ng-reflect-title="Non-Custodial Parents" ng-reflect-is-edit-hidden="true" 
     ng-reflect-row-version="AAAAAABxggI=" _ngcontent-ean-c33="" _nghost-ean-c35=""><div 
    class="partTitle flex-row" _ngcontent-ean-c35="">
    <span class="secTitle" _ngcontent-ean-c35="">Non-Custodial Parents</span>
    <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-pencil-alt" _ngcontent-ean-c35=""> 
    </i></a>
     <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-compress ng-star-inserted" 
    _ngcontent-ean-c35=""></i><!--bindings={
    "ng-reflect-ng-if": "false"
    }--></a>
    </nav>
   </div>
   </app-overview-card-header>



   <div class="part ncp ng-star-inserted" style="flex:1 1 0px; overflow: hidden; display: flex; flex- 
     direction: row;" _ngcontent-ean-c33="">
     <div class="ng-star-inserted" _ngcontent-ean-c33="">
          <div class="caretaker ng-star-inserted" _ngcontent-ean-c33="">


              <div class="row" _ngcontent-ean-c33="">
                  <div class="overview-field col-md-4" style="display: flex; flex-direction: row;" 
        _ngcontent-ean-c33="">
                      <span title="Relationship to Child(ren)" class="ovtitle" _ngcontent-ean- 
        c33="">Relationship to Child(ren)</span>
                      <span class="ovval" _ngcontent-ean-c33="">Other Parent&nbsp;</span>
                  </div>
                  <div class="overview-field col-md-8" style="flex:1 1 0px; overflow: hidden; display: 
      flex; flex-direction: row; align-items: stretch;" _ngcontent-ean-c33="">
                      <span title="Relationship to Child(ren) - Details" class="ovtitle" _ngcontent-ean- 
      c33="">Details</span>
                      <span class="ovval" _ngcontent-ean-c33="">fdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdf&nbsp;</span>
                  </div>
              </div>             

          </div>
      </div><div class="row" _ngcontent-ean-c33=""></div>
      <div class="row" _ngcontent-ean-c33=""></div>
     </div>

    </section>
   </app-ncp-overview>

  </main>
   </div>

  • 语言
印刷品 提交 语言文字 家 语言 英语 阅读 对 写 对 通话 对 其他 语言 阅读 写 通话 笔记 非监护父母 与儿童的关系(ren) 其他父母 细节 FDSFADSFDSFDFDSFDSFDFDSFDFDSFSFDFSFDFDSDFDFDSFDSFASDFSFDFASDFFSDFFDFDSFDFDSFDFDFDDFDFDSFDSFSFSFDFSFDFDSFDFDSFASDFSFDFASDFSFDFSFDFSFDFDSFDFDFDSFDFSFDSDFSFDFSFDSFDFDSFDFSFDSDFSFDFSFDFSFDSDFSFDFSFDFSFDSDFSFDFSFDFSFDFSFDSDFSFDFSFDFSFDSDFSFDFSFDFSFDSDFSFDFSFDFSFDFSFDSDFSFDFSFDFSFDSDFSFDFSFDFSFDSDFSFDFSFDFSFDFSFDSDFSFDSDFSFDFSFDFSFDFSFDFSFDFSFDFSFDSDFSFDFDFSFDFSFDFSFDFSFDFSFDFSFDSDFSFDFSFDFSFDFSFDSDFSFDSDFSFDFSFDFSFDFSFDFSFDFSFDFSFDFSFSFDFDFDSFDSFSDFDFDSFSDFSDFDF
我解决了这个问题,单词break:break-word;在IE11中引发了问题,
我把它改为单词break:breakall;它开始工作..花了3个小时:)

是的,我知道,但业务用户不会听这篇文章。11只有Flexbox属性的部分支持,所以您只能容纳这么多。您提供了HTML,但没有显示任何CSS。您是否熟悉
显示:-ms flexbox