CSS换行文字在IE中不起作用
法肯多·拉·罗卡（Facundo La Rocca）
我遇到了某些样式的问题，这些样式在Chrome和Firefox中都可以正常使用，但在IE中却没有。
我基本上要面对的问题是，应用的特定样式在Chrome中可以正常运行，但在IE中则不能。文本不换行。
如何复制它？首先在Chrome或Firefox中查看此小提琴，然后在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>非常感谢。
迈克尔·本杰明（Michael Benjamin）
IE在flexbox中包装时遇到问题。
通常的解决方法是为容器定义宽度。
并非总是清楚的是：哪个容器？
在这种情况下，这些调整似乎有效：
#professional > .row > div { width: 100%; }
#personal .row .row .row > div { width: 100%; }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
换行符（\ n）在IE中不起作用
- 2
CSS过渡在IE中不起作用
- 3
css在IE 11中不起作用
- 4
IE CSS不起作用，但在Firefox中起作用
- 5
CSS Flex列换行不起作用
- 6
段落文字的颜色在Firexfox和IE中不起作用
- 7
类的CSS仅在IE11中不起作用
- 8
CSS悬停在IE8中不起作用
- 9
CSS代码在Firefox和IE中不起作用
- 10
CSS动画在IE和Edge中不起作用
- 11
CSS Flexbox在IE10中不起作用
- 12
jQuery CSS转换在IE8中不起作用？
- 13
CSS动画在IE中不起作用
- 14
外部CSS在IE11中不起作用
- 15
从文件中删除换行不起作用
- 16
CSS在Chrome / Firefox中不起作用（渲染）但在IE10 / Edge中起作用
- 17
CSS：IE：空格：nowrap不起作用
- 18
文字装饰不起作用？在html / css中
- 19
<link> onerror在IE中不起作用
- 20
jQuery脚本在IE中不起作用
- 21
某些属性在IE中不起作用
- 22
ForeignObject在IE中不起作用
- 23
xe：dropDownButton在IE中不起作用
- 24
MouseWheel事件在IE中不起作用？
- 25
拖放在IE中不起作用
- 26
ngGridCsvExportPlugin在IE中不起作用
- 27
Ajax脚本在IE中不起作用
- 28
数据属性在IE中不起作用
- 29
innerHTML在IE 10中不起作用
我来说两句