css - 即使使用旧前缀,Flex 属性在 IE 10 中也不起作用
问题描述
我创建了一个英雄,文本位于图像的左侧,使用 flexbox 自动将文本定位在 div 的中心,相对于图像。
我使用了旧的和新的 IE 前缀来使它能够在最新版本的 IE 上运行,但它似乎不适用于 IE 10。文本 div 似乎延伸到整个列的宽度,并且在后面右边的图像。关于为什么会发生这种情况的任何想法?
代码:
.hero {
background-color: #3c763d;
text-align: center;
}
.flex {
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-box;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
}
.d-flex {
-ms-flex-align: center!important;
-webkit-box-align: center!important;
align-items: center!important;
display: -ms-flexbox!important;
display: -webkit-box;
display: flex;
margin-top: 0;
margin-left: auto;
margin-right: auto;
-moz-flex: 1 1 15em;
-webkit-box-flex: 1;
-ms-flex: 1 1 15em;
flex: 1 1 15em;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<section class="section hero">
<div class="container">
<div class="row flex">
<div class="col-xs-12 col-md-6 d-flex">
<div>
<h2>Headline</h2>
<p>Paragraph text</p>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div>
<img class="img-responsive" src="http://pngplay.com/wp-content/uploads/1/Laptop-PNG-Image.png">
</div>
</div>
</div>
</div>
</section>
解决方案
推荐阅读
- python - 如何使用 tkinter 定义不同的样式/主题
- javascript - GTM dataLayer.push 会影响性能吗?
- php - 一个接一个地向多维数组添加“简单”数组元素 PHP
- intellij-idea - 在 Intellij Idea 中滚动选项卡时如何使其更快?
- javascript - 在 Javascript 上导入模块时出错
- javascript - 如何在 Angular 10 中使用 Azure Maps?[解决了]
- python - 当我在 while 循环中使用 GOTO 命令时它不起作用
- python - 返回一个空列表而不是二元组
- javascript - 如何使用脚本制作与一组复选框交互的 TagList?
- javascript - JS Regex 删除字符串中最后一个连字符后的数字