html - css 更改为 chrome 但在 firefox 中工作完美

Question

我为我的页面定义了自定义 css，它在 firefox 中运行完美，但列表在 chrome 中相互重叠，我无法找到我在 css 中出错的地方

我的CSS代码是

    @media not all and (-webkit-min-device-pixel-ratio:0) { 


   #agile-row{
overflow-x:auto;
overflow-y:hidden;
align-items: flex-start;
display:flex;

}
#agile-board{
    margin-left:10px;

}
#i-box{
    width:300px;
    height:500px;
    overflow-y:auto;

}
}
#agile-row{
overflow-x:auto;
overflow-y:hidden;
align-items: flex-start;
display:flex;

}
#agile-board{
    margin-left:10px;
}
#i-box{
    width:300px;
    height:500px;
    overflow-y:auto;
}

我的 HTML 代码

<div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row wrapper1 wrapper-content1">


                    <?php
                        foreach($taskStatusModel as $taskstatus ){
                    ?>
                        <div class="agile-board" style="display:inline-block">
                            <div class="ibox">
                                <div class="ibox-items" >
                                <div class="ibox-content">

                                <!--<div style="width:100%;text-align:right"><a href="index.php?r=pmt/project/project-kanban&id=<?=$model->id?>&delid=<?=$taskstatus->id?>" class="btn btn-xs btn-success" style="color:#fff;"><span class="glyphicon glyphicon-trash"></span></a></div>-->
                                    <input type="hidden" class="status" value="<?= $taskstatus->id ?>">
                                    <h3><?=$taskstatus->label?> 

                                    <a href="index.php?r=pmt/project/project-kanban&id=<?=$model->id?>&delid=<?=$taskstatus->id?>"  class="btn btn-xs btn-primary btn-circle pull-right"> <i class="fa fa-trash"></i> </a>
                                    <a href="index.php?r=pmt/project/project-kanban&id=<?=$model->id?>&delid=<?=$taskstatus->id?>"  class="btn btn-xs btn-info btn-circle pull-right"> <i class="fa fa-pencil"></i> </a>

                                    </h3>
                                    <p class="small"><i class="fa fa-hand-o-up"></i> Drag task between list</p>

                                    <div class="input-group">

                                        <a href="javascript:void(0)" class="btn btn-warning btn-sm" onClick="opentaskpopup(this)"><i class="fa fa-edit"></i> <?=Yii::t('app', 'New Task')?></a>
                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm" onClick="opendefectpopup(this)"><i class="fa fa-bug"></i> <?=Yii::t('app', 'New Defect')?></a>

                                    </div>
                                    <ul class="sortable-list connectList agile-list">

                                        <?php


                                        foreach(getTaskRecords($taskstatus->id) as $row){
                                        ?>
                                        <li class="warning-element">
                                            <input type="hidden" class="id" value="<?=$row['id']?>" a href="index.php?r=pmt/task/task-view&id=<?=$row['id']?>" >
                                            <input type="hidden" class="type" value="task">
                                          <a href="index.php?r=pmt/task/task-view&id=<?=$row['id']?>" style="word-wrap:break-word">  <?=$row['task_description']?></a>
                                            <div class="agile-detail">
                                                <a href="index.php?r=pmt/task/task-view&id=<?=$row['id']?>" class="pull-right btn btn-xs btn-warning"><?=$row['task_id']?></a>
                                                <i class="fa fa-clock-o"></i> <?=date('d-m-Y',$row['added_at']);?>
                                            </div>
                                        </li>
                                        <?php
                                            }
                                        ?>

                                    <!-- defect display begin-->

                                        <?php

                                        foreach(getDefectRecords($taskstatus->id) as $row){
                                        ?>
                                        <li class="danger-element">
                                            <input type="hidden" class="id" value="<?=$row['id']?>" a href="index.php?r=pmt/defect/defect-view&id=<?=$row['id']?>" >
                                            <input type="hidden" class="type" value="defect">
                                          <a href="index.php?r=pmt/defect/defect-view&id=<?=$row['id']?>" style="word-wrap:break-word">  <?=$row['defect_description']?></a>
                                            <div class="agile-detail">
                                                <a href="index.php?r=pmt/defect/defect-view&id=<?=$row['id']?>" class="pull-right btn btn-xs btn-danger"><?=$row['defect_id']?></a>
                                                <i class="fa fa-clock-o"></i> <?=date('d-m-Y',$row['added_at']);?>
                                            </div>
                                        </li>
                                        <?php
                                            }
                                        ?>
                                    </ul>
                                <!-- defect display end-->
                             </div>
                         </div>
                     </div><!-- needs action column ends -->
                        </div>
                    <?php
                        }
                    ?>


        </div> <!-- div row ends -->


    </div><!-- div wrapper ends -->

每次添加新列表时，该行应自动将其添加到水平滚动的 div

Answer 1

你应该从 css 中删除前缀