html – CSS包装文本在IE中不起作用

前端之家收集整理的这篇文章主要介绍了html – CSS包装文本在IE中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到一些问题,一些样式在Chrome和Firefox中都能正常工作,但它们不在IE中.

我面临的问题主要是应用的特定样式在Chrome中运行良好,但在IE中却没有.文本不会包含在列中.

如何重现它?首先在Chrome或Firefox中查看this fiddle,然后在IE中进行操作.

为了简化操作,请从此处直接尝试:

  1. .Container {
  2. display: flex;
  3. text-align: center;
  4. }
  5. .column {
  6. flex-direction: column;
  7. }
  8. .row {
  9. flex-direction: row;
  10. }
  11. .jc-center {
  12. justify-content: center;
  13. }
  14. .column-item-x2 {
  15. width: 50%;
  16. }
  17. .jc-start {
  18. justify-content: flex-start;
  19. }
  20. .resume-item {
  21. padding-left: 10px;
  22. padding-right: 10px;
  23. padding-top: 4px;
  24. padding-bottom: 4px;
  25. border-radius: 7px;
  26. display: inline-block;
  27. position: relative;
  28. font-size: medium;
  29. right: 15px;
  30. }
  31. .dot {
  32. position: relative;
  33. display: inline-block;
  34. align-self: center;
  35. border-radius: 10px;
  36. height: 12px;
  37. width: 12px;
  38. right: 37px;
  39. }
  40. .dot-skill {
  41. display: inline-block;
  42. align-self: center;
  43. border-radius: 15px;
  44. margin-right: 3px;
  45. height: 15px;
  46. width: 15px;
  47. }
  48. .skill {
  49. margin-right: 5px;
  50. margin-bottom: 5px;
  51. }
  1. <div id="resume" class="Container column" style=" margin-top: 50px;">
  2. <span style="textAlign: left; fontSize: 40px; color: red;">
  3. <input type="checkBox" id="Resume-chk" style="display: none;" />
  4. <b id="Resume-title">RESUME</b>
  5. </span>
  6. <hr />
  7. <div class="Container row jc-center" style="margin-top: 30px;">
  8. <div class="Container column jc-start column-item-x2" id="professional" style="color: red;">
  9. <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;">
  10. <div style="text-align: left;">
  11. <h2 style="color: red;">PROFESSIONAL</h2>
  12.  
  13. <div class="Container column">
  14. <div class="Container row">
  15. <div class="dot" style="background-color: red;"></div>
  16. <div style={{ position: "relative" }}>
  17. <span class="resume-item" style="color: white; background-color: red;"><b>Nov 2016 - Present</b></span>
  18. </div>
  19. </div>
  20. <div style="text-align: left;">
  21. <h3>Web.com</h3>
  22. <p style="color: gray;">
  23. <span>
  24. Actualmente trabajo como Engineer III Fullstack .NET en Web.com,una compañía con fuerte posición en el mercado norteamericano de eCommerce. <br />
  25. Realizo mantenimiento y nuevos desarrollos tanto back-end como front-end
  26. del portal de ticketing de la compañía.
  27. </span>
  28. </p>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="Container column jc-start column-item-x2" id="personal" style="color: red;">
  35. <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px">
  36. <div style="text-align: left;">
  37. <h2 style="color: red;">SKILLS</h2>
  38. <div class="Container column">
  39.  
  40. <div>
  41. <div class="Container row">
  42. <div class="dot" style="background-color: red;" />
  43. <div style="position: relative;">
  44. <span class="resume-item" style="padding-left: 3px; padding-bottom: 6px; text-align: left; color: red;"><b>C#</b></span>
  45. </div>
  46. </div>
  47. <div class="Container row" style="margin-bottom: 20px;">
  48. <div class="dot-skill" style="background-color: red;" />
  49. <div class="dot-skill" style="background-color: red;" />
  50. <div class="dot-skill" style="background-color: red;" />
  51. <div class="dot-skill" style="background-color: red;" />
  52. <div class="dot-skill" style="background-color: red;" />
  53. <div class="dot-skill" style="background-color: red;" />
  54. <div class="dot-skill" style="background-color: red;" />
  55. <div class="dot-skill" style="background-color: red;" />
  56. <div class="dot-skill" style="background-color: red;" />
  57. <div class="dot-skill" style="background-color: #B4B2B2;" />
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63.  
  64. <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;">
  65. <div style="text-align: left;" }}>
  66. <h3 style="color: red;">OTHER_SKILLS</h3>
  67. <div class="Container row" style="margin-left: 15px; flex-wrap: wrap;" }}>
  68. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">TDD</span>
  69. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Scrum</span>
  70. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">MongoDB</span>
  71. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ElasticSearch</span>
  72. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Flux</span>
  73. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Firebase</span>
  74. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">.Net MVC 5</span>
  75. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">REST Services</span>
  76. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">SOA</span>
  77. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">OAuth</span>
  78. <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ExpressJS</span>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </div>

非常感谢.

解决方法

IE在flexBox中包装有问题.

正常修复是为容器定义宽度.

什么并不总是清楚:哪个容器?

在这种情况下,这些调整似乎有效:

  1. #professional > .row > div { width: 100%; }
  2.  
  3. #personal .row .row .row > div { width: 100%; }

revised fiddle

相关:Why IE11 doesn’t wrap the text in flexbox?

猜你在找的HTML相关文章