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

Question

我正在尝试在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;                 
   }
}

Answer 1

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

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

干杯