我遇到一些问题,一些样式在Chrome和Firefox中都能正常工作,但它们不在IE中.
我面临的问题主要是应用的特定样式在Chrome中运行良好,但在IE中却没有.文本不会包含在列中.
如何重现它?首先在Chrome或Firefox中查看this fiddle,然后在IE中进行操作.
为了简化操作,请从此处直接尝试:
.Container { display: flex; text-align: center; } .column { flex-direction: column; } .row { flex-direction: row; } .jc-center { justify-content: center; } .column-item-x2 { width: 50%; } .jc-start { justify-content: flex-start; } .resume-item { padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 7px; display: inline-block; position: relative; font-size: medium; right: 15px; } .dot { position: relative; display: inline-block; align-self: center; border-radius: 10px; height: 12px; width: 12px; right: 37px; } .dot-skill { display: inline-block; align-self: center; border-radius: 15px; margin-right: 3px; height: 15px; width: 15px; } .skill { margin-right: 5px; margin-bottom: 5px; }
<div id="resume" class="Container column" style=" margin-top: 50px;"> <span style="textAlign: left; fontSize: 40px; color: red;"> <input type="checkBox" id="Resume-chk" style="display: none;" /> <b id="Resume-title">RESUME</b> </span> <hr /> <div class="Container row jc-center" style="margin-top: 30px;"> <div class="Container column jc-start column-item-x2" id="professional" style="color: red;"> <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;"> <div style="text-align: left;"> <h2 style="color: red;">PROFESSIONAL</h2> <div class="Container column"> <div class="Container row"> <div class="dot" style="background-color: red;"></div> <div style={{ position: "relative" }}> <span class="resume-item" style="color: white; background-color: red;"><b>Nov 2016 - Present</b></span> </div> </div> <div style="text-align: left;"> <h3>Web.com</h3> <p style="color: gray;"> <span> Actualmente trabajo como Engineer III Fullstack .NET en Web.com,una compañía con fuerte posición en el mercado norteamericano de eCommerce. <br /> Realizo mantenimiento y nuevos desarrollos tanto back-end como front-end del portal de ticketing de la compañía. </span> </p> </div> </div> </div> </div> </div> <div class="Container column jc-start column-item-x2" id="personal" style="color: red;"> <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px"> <div style="text-align: left;"> <h2 style="color: red;">SKILLS</h2> <div class="Container column"> <div> <div class="Container row"> <div class="dot" style="background-color: red;" /> <div style="position: relative;"> <span class="resume-item" style="padding-left: 3px; padding-bottom: 6px; text-align: left; color: red;"><b>C#</b></span> </div> </div> <div class="Container row" style="margin-bottom: 20px;"> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: #B4B2B2;" /> </div> </div> </div> </div> </div> <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;"> <div style="text-align: left;" }}> <h3 style="color: red;">OTHER_SKILLS</h3> <div class="Container row" style="margin-left: 15px; flex-wrap: wrap;" }}> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">TDD</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Scrum</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">MongoDB</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ElasticSearch</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Flux</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Firebase</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">.Net MVC 5</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">REST Services</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">SOA</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">OAuth</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ExpressJS</span> </div> </div> </div> </div> </div> </div>
非常感谢.
解决方法
IE在flexBox中包装有问题.
正常修复是为容器定义宽度.
什么并不总是清楚:哪个容器?
在这种情况下,这些调整似乎有效:
#professional > .row > div { width: 100%; } #personal .row .row .row > div { width: 100%; }