我正在將我的網站從一個限制自己支持IE7特性的網站遷移到一個要求最低支持IE11的網站。特別是，我正在從使用原始的流樣式切換到使用display: flex，這是從IE10開始支持的，當然在所有現代瀏覽器上都支持。在大多數情況下，行為保持一致，我可以擺脫丑陋的黑客需要讓舊的風格工作。但是由于某種原因，當我將包含阿寧tinyMCE編輯器的行更改為display: flex時，編輯器會水平收縮。

我只是改變了CSS。HTML仍然是:

<div class="row">
  <textarea name="message" id="message" placeholder="[enter message]"
            rows='5' cols='100'></textarea>
</div>

div.row的舊CSS定義是:

div.row {   white-space:        nowrap;
            clear:              both; 
            float:              left;
            width:              100%;
        }

div.row的新CSS定義是:

div.row {   white-space:        nowrap;
            width:              100%;
            display:            flex;
        }

我沒有改變tinyMCEparms:

var tinyMCEparms = {
    selector            : 'textarea',
    plugins             : 'link lists image',
    menubar             : false,
    language            : 'en',
    skin                : 'oxide-dark',
    toolbar             : "undo redo | styleselect | bold italic | " 
                           + "bullist numlist | link image",
    height              : "170px",
    content_css         : "/styles.css"
  };

包含它的div與其容器具有相同的寬度，在本例中為1520。如果我沒有在textarea上激活tinyMCE，那么textarea的寬度是1048。class = & quot的div。tox tox-tinymce & quot；而里面的東西只有446的寬度！對于舊的CSS，tinyMCE編輯器的寬度是1048。文檔中說編輯器的默認寬度應該是它所替換的元素的寬度。為什么？

一年多過去了，我仍然無法找到這個問題的答案。我已經升級到TinyMCE6，但編輯器仍然無法根據& lttextarea & gt。為了演示我的頁面上有一個允許我禁用tinyMCE的特性，這樣我就可以看到底層頁面:

請注意，為了查看它，我已經激活了瀏覽器功能來顯示包含Flex框的尺寸。但是，當我在此頁面上激活tinyMCE時，我看到:

問題顯然是瀏覽器認為& ltdiv class = & quotrow & quot& gt所以一個& quot可見& quot標簽僅使用1/4的可用空間。我只輸入了一個& lttextarea & gt。TinyMCE將它設置為display:none，這樣它就不會出現，但是在“”中只留下一個顯示的標記，即class = & quottox tox-tinymce & quot；。為什么它只使用了包含& ltdiv & gt。