Question

我有自举卡，我正试图从下到上更改图片card-img-top的订单位置，白衣媒体查询。它在chrome，edge，opera，vivaldi中工作，但 flex命令 似乎在mozila firefox中不起作用。什么可能导致这个问题？

HTML

<div class="card card-second" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Heading</h5>
                    <img src="img/test-image.png" class="rectangle">
                    <p class="card-text rounded-card">Lorem ipsum</p>
                    <img class="card-img-top img-center" src="img/image-frame.png" alt="Card image cap">
                </div>
            </div>

CSS

 .card-second .card-body .card-img-top{
        -webkit-order: -1;
        order: -1;
        display: -webkit-box;      
        display: -moz-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;     
        display: flex;
    }

上次我查看时，firefox支持flex命令，但似乎无效。

它在firefox中的外观：http://prntscr.com/icq5w8

它在其他浏览器中的显示效果：http://prntscr.com/icq6dm

Answer 1

如果你只想让.card-img-top在所有浏览器中排在首位，你只需要像这样设置为img容器。

我已经在mozilla中测试了它并且它按预期工作。

  .card-body{
			display: flex;
			flex-direction: column;
		}
  .card-img-top{
			order: -1;
		}

<div class="card card-second" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Heading</h5>
           <img src="https://eter22.files.wordpress.com/2008/09/homero_simpson.jpg" class="rectangle">
           <p class="card-text rounded-card">Lorem ipsum</p>
           <img class="card-img-top img-center" src="http://sonarfm.cl/sonarfm/site/artic/20160217/imag/foto_0000001120160217172059.png" alt="Card image cap">
     </div>
</div>

Answer 2

试试这个。将flex属性赋予直接父元素，然后将order属性命名为direct元素

.card-second .card-body{
   display: -webkit-box;      
   display: -moz-box;         
   display: -ms-flexbox;      
   display: -webkit-flex;     
   display: flex;
   flex-direction: column;
}
.card-second .card-body .card-img-top{
  order:-1;
}

Flex命令无法在mozzila firefox中运行

2 个答案: