IE11 flexbox不考虑包装文本的高度

时间：2018-05-24 16:42:32

标签： html css css3 flexbox internet-explorer-11

我知道最终答案可能是＆＃34; IE糟透了，而你是S.O.L。＆＃34;但我无法弄清楚如何让这个flex布局在IE11中正常工作，并希望有人能理解为什么布局破坏/有一些聪明的黑客来解决它。在IE中文本包装时，文本折叠的边框只包含第一行。

最终目标是让文本底部对齐并让svg填充剩余空间，但是要灵活（我不想在svg或text元素上使用设置高度）因为这是针对web的组件我正在努力。

＆＃13;
＆＃13; 
div{
  box-sizing:border-box;
  background:#fafafa;
  border-radius:3px;
  width: 100px;
  height: 100px;   
  padding:5px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:stretch;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
h5{
  flex-shrink:1;
  text-align:center;
  margin:5px auto;
  max-width:100%;
  border:1px solid #000;
}
span{
  display:block;
  display:flex;
  align-self:stretch;
}
svg{
  max-height:100%;
  max-width:100%;
  flex-grow:1;
}
＆＃13; 
<div>
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.71 62.15"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>myThermometer</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M34,45.55V36.82a2.92,2.92,0,1,0-5.84,0v8.73a6.68,6.68,0,1,0,5.84,0Z"></path><path class="cls-1" d="M38.11,43.46V7a7,7,0,1,0-14,0V43.46a10.67,10.67,0,1,0,14,0ZM31.1,60a8.48,8.48,0,0,1-4.83-15.45v-3.2h1v-1h-1V37.72h1v-1h-1V34.11h2.06a4.08,4.08,0,0,1,1.07-.76v-.22H26.27V30.51H29.4v-1H26.27V26.91H29.4v-1H26.27V23.3H29.4v-1H26.27V19.7H29.4v-1H26.27V16.1H29.4v-1H26.27V12.49H29.4v-1H26.27V8.89H29.4v-1H26.27V7a4.83,4.83,0,1,1,9.66,0v37.5A8.48,8.48,0,0,1,31.1,60Z"></path><path class="cls-1" d="M49.34,44.75l-.91-1.31L50,43a.52.52,0,0,0,.37-.64A.53.53,0,0,0,49.7,42l-1.29.35.46-1.26a.53.53,0,0,0-.32-.67.52.52,0,0,0-.67.32L47.43,42l-.77-1.09a.52.52,0,0,0-.86.59l.92,1.32-1.55.41a.52.52,0,1,0,.27,1l1.3-.35-.46,1.26a.52.52,0,0,0,1,.36l.46-1.26.77,1.09a.52.52,0,1,0,.85-.59Z"></path><path class="cls-1" d="M50.57,13.6l-1.18-1.69,2-.53a.67.67,0,1,0-.35-1.3l-1.66.45L50,8.9A.68.68,0,0,0,49.55,8a.67.67,0,0,0-.86.4l-.59,1.63-1-1.42a.67.67,0,1,0-1.1.77l1.18,1.69-2,.53A.68.68,0,1,0,45.55,13l1.67-.45-.6,1.62A.69.69,0,0,0,47,15a.68.68,0,0,0,.86-.41L48.48,13l1,1.41a.68.68,0,0,0,.94.17A.66.66,0,0,0,50.57,13.6Z"></path><path class="cls-1" d="M59.93,31.91l-1.61-2.3L61,28.89a.92.92,0,1,0-.48-1.77l-2.26.61.8-2.21a.91.91,0,0,0-1.72-.62l-.8,2.2-1.35-1.92a.92.92,0,1,0-1.5,1.05l1.61,2.29-2.71.73A.9.9,0,0,0,52,30.37.92.92,0,0,0,53.1,31l2.26-.6-.8,2.2a.92.92,0,1,0,1.72.63L57.09,31,58.43,33a.92.92,0,0,0,1.28.22A.91.91,0,0,0,59.93,31.91Z"></path><path class="cls-1" d="M14.47,13.41l.92,1.3-1.55.42a.52.52,0,0,0,.27,1l1.3-.35L15,17.05a.52.52,0,1,0,1,.36l.46-1.26.77,1.1a.52.52,0,0,0,.85-.61l-.91-1.3,1.54-.42a.52.52,0,0,0,.37-.64.53.53,0,0,0-.64-.37l-1.29.35L17.54,13a.54.54,0,0,0-.32-.67.52.52,0,0,0-.67.31l-.46,1.26-.76-1.1a.53.53,0,0,0-.73-.12A.52.52,0,0,0,14.47,13.41Z"></path><path class="cls-1" d="M13.13,36.62l1.18,1.69-2,.53a.68.68,0,0,0,.35,1.31l1.67-.45-.59,1.62a.67.67,0,0,0,1.26.46l.59-1.62,1,1.41a.68.68,0,1,0,1.11-.77l-1.18-1.69,2-.53a.67.67,0,0,0-.35-1.3l-1.67.45.59-1.63a.67.67,0,0,0-.4-.86.68.68,0,0,0-.87.4l-.59,1.63-1-1.42a.67.67,0,0,0-.94-.16A.66.66,0,0,0,13.13,36.62Z"></path><path class="cls-1" d="M1.78,21.45l1.6,2.3-2.7.72a.92.92,0,1,0,.47,1.77l2.27-.61-.8,2.21a.91.91,0,1,0,1.72.62l.8-2.2,1.35,1.92a.91.91,0,0,0,1.27.23A.92.92,0,0,0,8,27.13L6.38,24.84l2.7-.73a.91.91,0,1,0-.47-1.76L6.34,23l.81-2.2a.93.93,0,0,0-.55-1.18.92.92,0,0,0-1.17.55l-.81,2.21L3.28,20.4A.92.92,0,0,0,2,20.18.91.91,0,0,0,1.78,21.45Z"></path></g></g></svg>
  </span>
  <h5>
  Climate Controlled
  </h5>
  </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

现在在IE中试试这个。它应该按你的意愿工作。我删除了box-sizing属性并将高度100％添加到h5元素。

＆＃13;
＆＃13; 
div{
  background:#fafafa;
  border-radius:3px;
  width: 100px;
  height: 100px;   
  padding:5px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:stretch;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
h5{
  flex-shrink:1;
  text-align:center;
  margin:5px auto;
  max-width:100%;
  border:1px solid #000;
  height : 100%;
}
span{
  display:block;
  display:flex;
  align-self:stretch;
}
svg{
  max-height:100%;
  max-width:100%;
  flex-grow:1;
}
＆＃13; 
<div>
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.71 62.15"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>myThermometer</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M34,45.55V36.82a2.92,2.92,0,1,0-5.84,0v8.73a6.68,6.68,0,1,0,5.84,0Z"></path><path class="cls-1" d="M38.11,43.46V7a7,7,0,1,0-14,0V43.46a10.67,10.67,0,1,0,14,0ZM31.1,60a8.48,8.48,0,0,1-4.83-15.45v-3.2h1v-1h-1V37.72h1v-1h-1V34.11h2.06a4.08,4.08,0,0,1,1.07-.76v-.22H26.27V30.51H29.4v-1H26.27V26.91H29.4v-1H26.27V23.3H29.4v-1H26.27V19.7H29.4v-1H26.27V16.1H29.4v-1H26.27V12.49H29.4v-1H26.27V8.89H29.4v-1H26.27V7a4.83,4.83,0,1,1,9.66,0v37.5A8.48,8.48,0,0,1,31.1,60Z"></path><path class="cls-1" d="M49.34,44.75l-.91-1.31L50,43a.52.52,0,0,0,.37-.64A.53.53,0,0,0,49.7,42l-1.29.35.46-1.26a.53.53,0,0,0-.32-.67.52.52,0,0,0-.67.32L47.43,42l-.77-1.09a.52.52,0,0,0-.86.59l.92,1.32-1.55.41a.52.52,0,1,0,.27,1l1.3-.35-.46,1.26a.52.52,0,0,0,1,.36l.46-1.26.77,1.09a.52.52,0,1,0,.85-.59Z"></path><path class="cls-1" d="M50.57,13.6l-1.18-1.69,2-.53a.67.67,0,1,0-.35-1.3l-1.66.45L50,8.9A.68.68,0,0,0,49.55,8a.67.67,0,0,0-.86.4l-.59,1.63-1-1.42a.67.67,0,1,0-1.1.77l1.18,1.69-2,.53A.68.68,0,1,0,45.55,13l1.67-.45-.6,1.62A.69.69,0,0,0,47,15a.68.68,0,0,0,.86-.41L48.48,13l1,1.41a.68.68,0,0,0,.94.17A.66.66,0,0,0,50.57,13.6Z"></path><path class="cls-1" d="M59.93,31.91l-1.61-2.3L61,28.89a.92.92,0,1,0-.48-1.77l-2.26.61.8-2.21a.91.91,0,0,0-1.72-.62l-.8,2.2-1.35-1.92a.92.92,0,1,0-1.5,1.05l1.61,2.29-2.71.73A.9.9,0,0,0,52,30.37.92.92,0,0,0,53.1,31l2.26-.6-.8,2.2a.92.92,0,1,0,1.72.63L57.09,31,58.43,33a.92.92,0,0,0,1.28.22A.91.91,0,0,0,59.93,31.91Z"></path><path class="cls-1" d="M14.47,13.41l.92,1.3-1.55.42a.52.52,0,0,0,.27,1l1.3-.35L15,17.05a.52.52,0,1,0,1,.36l.46-1.26.77,1.1a.52.52,0,0,0,.85-.61l-.91-1.3,1.54-.42a.52.52,0,0,0,.37-.64.53.53,0,0,0-.64-.37l-1.29.35L17.54,13a.54.54,0,0,0-.32-.67.52.52,0,0,0-.67.31l-.46,1.26-.76-1.1a.53.53,0,0,0-.73-.12A.52.52,0,0,0,14.47,13.41Z"></path><path class="cls-1" d="M13.13,36.62l1.18,1.69-2,.53a.68.68,0,0,0,.35,1.31l1.67-.45-.59,1.62a.67.67,0,0,0,1.26.46l.59-1.62,1,1.41a.68.68,0,1,0,1.11-.77l-1.18-1.69,2-.53a.67.67,0,0,0-.35-1.3l-1.67.45.59-1.63a.67.67,0,0,0-.4-.86.68.68,0,0,0-.87.4l-.59,1.63-1-1.42a.67.67,0,0,0-.94-.16A.66.66,0,0,0,13.13,36.62Z"></path><path class="cls-1" d="M1.78,21.45l1.6,2.3-2.7.72a.92.92,0,1,0,.47,1.77l2.27-.61-.8,2.21a.91.91,0,1,0,1.72.62l.8-2.2,1.35,1.92a.91.91,0,0,0,1.27.23A.92.92,0,0,0,8,27.13L6.38,24.84l2.7-.73a.91.91,0,1,0-.47-1.76L6.34,23l.81-2.2a.93.93,0,0,0-.55-1.18.92.92,0,0,0-1.17.55l-.81,2.21L3.28,20.4A.92.92,0,0,0,2,20.18.91.91,0,0,0,1.78,21.45Z"></path></g></g></svg>
  </span>
  <h5>
  Climate Controlled
  </h5>
  </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题