如果使用 chrome 打印时边框半径更大，边框宽度会发生变化答案

【问题标题】：Border-width changes if border-radius is greater when printing using chrome如果使用 chrome 打印时边框半径更大，边框宽度会发生变化
【发布时间】：2015-08-07 09:48:50
【问题描述】：

我正在尝试在 chrome 上打印页面。在其他浏览器上，页面和打印工作正常，但在 chrome 上它会中断。在打印预览模式下，边框宽度更新为边框半径值。在屏幕上没有出现这个问题。我已附上相同的屏幕截图以供参考。

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;                 
   }
}

【问题讨论】：

你有没有想过这个问题？我在 Chrome 50 中遇到了这个问题。
我可以确认 Chrome 中的错误。 :-/
@dman2306 是的，我已经弄清楚了。答案如下。

标签： css google-chrome printing

【解决方案1】：

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

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

干杯

【讨论】：