如果使用chrome打印时border-radius更大，则边框宽度会更改

Posted 2021-05-05

我正在尝试在chrome上打印一个页面。在其他浏览器上，页面和打印工作正常，但在chrome上它会中断。在打印预览模式下，边框宽度更新为border-radius值。屏幕上没有出现此问题。我已经附上相同的屏幕抓取参考.

CSS代码如下：

.tab {
position: relative;
width: 225px;
height: 60px;
border: solid 5px #e2e0e3;    
border-bottom-color: transparent;
border-bottom-width: inherit;
background-color: #FFFFFF;
border-radius: 25px 25px 0 0;    
display: inline-block;}
@media print {
   .tab{
      display: inline-block !important;
      border-radius: 15px 15px 0 0!important;
      border-width: 5px !important;                 
   }
}

答案

已经有一段时间我发布了这个问题。我已经找到了我自己的原因。

这个问题背后的罪魁祸首是底部边框宽度为0px。原因是，在打印模式下，边框半径在所有边框宽度相同且可见之前无法工作。如果任何一个边框不可见/无，它将在预览模式和打印时中断UI。由于没有可用的解决方案，我只是在打印模式下可以看到底部边框，并且在浏览器中没有显示。我知道这不是一个真正的解决方案，但有时，你只需要坚持下去。

干杯