我遇到一些问题,一些样式在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%; }