Laravel使用dompdf生成PDF时display:inline-block样式渲染异常求助

• 替换inline-block为float布局：dompdf 对 inline-block 的兼容性较差，优先使用浮动实现并排效果，同时要注意父容器清除浮动避免布局错乱。
• 重置默认边距：你只设置了@page的padding为0，但是dompdf渲染内核默认给body设置了margin，需要手动重置body的内外边距。
• 补充分页避免截断属性：给标签元素加上page-break-inside: avoid，防止单个标签被分页切割成两部分。
• 验证宽度计算：A4 纸宽度为210mm，你设置的单个标签宽度为65mm，一行最多放3个标签总宽度为195mm，剩余空间可按需设置间距，总宽度不要超过210mm避免意外折行。
• 升级扩展版本：如果使用的是旧版本的barryvdh/laravel-dompdf，建议升级到最新稳定版，新版本对CSS的支持度更高。
• 安全优化：直接使用$_GET获取参数存在SQL注入风险，建议改用Laravel官方的请求参数获取方法。

修改后完整代码 #

public function Repas_etq()
{
    $pdf = App::make('dompdf.wrapper');
    $customPaper = array(0,0,595,842);
    $date=date('Y-m-d');
    $repas_pdj = DB::table('fiche_repas')->where('date_planif',$date)->where('repas','LIKE',"%".request('repas')."%")->get();

    $html="<html><head><title>Etiquettes </title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <style>
    @page{ padding:0px; margin:0;}
    body {
        margin: 0;
        padding: 0;
    }
    /* 父容器清除浮动 */
    .label-wrapper::after {
        content: '';
        display: block;
        clear: both;
    }
    span.etq 
    {
        display: block;
        float: left;
        width: 65mm;
        height: 30mm;
        /* 按需调整间距，示例为右间距5mm、下间距5mm */
        margin: 0 5mm 5mm 0;
        border:solid 1px red;
        background-color: yellow; 
        page-break-inside: avoid;
    }
    </style>
    </head>
    <body>";
    
    $html.="<div class='label-wrapper'>";
    foreach($repas_pdj as $pdj)
    {   
            $html.="<span class='etq'>".$pdj->id."</span>";
    }
    $html.="</div>";
  
    $html.="</body></html>";    
   
    $pdf->loadHTML($html);
    
    $pdf->setPaper($customPaper)->setWarnings(false)->Output('myfile.pdf','F');
   
    return $pdf->stream();
   
}

内容的提问来源于stack exchange，提问作者Youssef MK