Dompdf 重叠图像答案

【问题标题】：Dompdf overlapping the imagesDompdf 重叠图像
【发布时间】：2017-04-16 14:46:15
【问题描述】：

我正在尝试使用 dompdf 将产品图库图像转换为 PDF，但它与图像重叠而不是在下一行显示它们（对于解决方案，我也尝试了 <br> 但对我不起作用）

if(isset($data) && count($data)>0){
$html="<link rel='stylesheet' href='".get_template_directory_uri()."/assets/css/woocommerce.css'>";
$html.="<link rel='stylesheet' href='".get_template_directory_uri()."/style.css'>";
$html.="<div  style='text-align: center;'><h1>".$project_title."</h1><span><h3>".$project_sub_title."</h3></span></div>";
$html.='<div id="pdf_main"><ul class="products clearfix products-3 pdf_class">';
$counter=1;
while  ($data = mysql_fetch_assoc($result)) {
$html.='<li class=" product type-product status-publish has-post-thumbnail product_cat-bedroom  instock shipping-taxable purchasable product-type-simple">
<img src="'.$data['img'].'" class="attachment-shop_catalog size-shop_catalog">
 </a>
 <div class="product-details">
  <div class="product-details-container">
   <h3 class="" data-fontsize="16" data-lineheight="24">'.$data['product_title'].'</h3>
</div>
</div>
</li>';
}
$html.="</ul></div>";
$options = new Options();
$options->set('isRemoteEnabled', true);
$dompdf = new Dompdf($options);
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream('Products.pdf');
$output = $dompdf->output();
}

这里是css

.products li.product { background-color: transparent; }
.products-3 > li:nth-child(3n+1) { clear: both;    content: " ";    display: block;}
 .products li { border-color: #ebeaea;}
 .products-3 > li { float: left;    margin-bottom: 11px;    margin-right: 1%;    width: 32.6%;}
.products > li {  -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    border-color: #efefef;    border-image: none;    border-style: solid;    border-width: 1px 1px 2px;}
.product {    position: relative;}

看到第四张图片被切了一半，第五张也没有显示，在我的 css 中，我在第三个产品之后清除浮动，但它不工作并且重叠图像

【问题讨论】：

你能发布你的 CSS 吗？
@ChrisHappy 我添加了 css

标签： php dompdf

【解决方案1】：

经过大量配音后，我才知道<li> 正在变得自动，这就是它过度重叠的原因。我给了它固定的宽度，它正在工作并显示完美的网格

$html.='<li class=" product type-product status-publish has-post-thumbnail product_cat-bedroom  instock shipping-taxable purchasable product-type-simple">
<img src="'.$data['img'].'" class="attachment-shop_catalog size-shop_catalog">
 </a>
 <div class="product-details">
  <div class="product-details-container">
   <h3 class="" data-fontsize="16" data-lineheight="24">'.$data['product_title'].'</h3>
</div>
</div>
</li>';

【讨论】：

【解决方案2】：

迟到的答案，但可能对 domPDF 中有重叠图像的人有用：

我遇到了图像与文本重叠的问题，最后发现问题出在 HTML 中。 domPDF 与浏览器可以补偿的一些事情作斗争。我们在正文中有一个流氓风格的标签，它似乎破坏了告诉 dompf 图像高度的任何东西。

这个工具非常适合调试：https://eclecticgeek.com/dompdf/debug.php

您可以将您的 HTML 粘贴到其中并呈现为带有设置等的 PDF。这就是我的问题。

【讨论】：