我为我的页面定义了自定义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
答案 0 :(得分:0)
你应该从css中删除前缀